CSS(二)

    技术2022-07-11  81

    CSS代码

    文本对齐 text-align:left(默认)/center(居中)/right(右对齐); 文本行高(行间距) line-height:xxpx 首行缩进 text-indent:xx;

    单位         px(像素),em(1 em = 1 font-size)

    文本装饰(上中下划线) text-decoration:line-through(中划线)/underline(下划线)/none; 光标定位值 当光标移到元素上时,光标形状发生改变。 cursor;: 伪类选择器 html部分 <a href="www.baidu.com">www.baidu.com</a> css部分 a:hover{ background-color: red; }

    当鼠标移上去时元素会发生变化。

    元素类型

    行级元素

            内容决定元素所占位置         不可以通过CSS改变宽高 span strong em a del

    块级元素         独占一行         可以通过CSS改变宽高 div p ul li ol form address行块级元素         内容决定大小         改以改变宽高 img

    凡是带有inline的元素都有文字特性(会被空格分割)例如:img。

    行级元素只能嵌套行级元素块级元素可以嵌套任何元素

    盒子模型

    盒子的组成部分:

            1.盒子壁(border)

            2.内边距(padding)

            3.盒子内容(content = width + height)

    盒子模型=margin(外边距) + border + padding + content

    margin/padding: xxpx xxpx xxpx xxpx; 上 右 下 左 margin/padding: xxpx xxpx xxpx; 上 左右 下 margin/padding: xxpx xxpx; 上下 左右

    盒模型计算         可视区(真正)宽高 = width/height + border + padding

    定位

    定位后的元素会脱离原来的层         用z-index: 1;来改变层数。

    相对定位(relative)         保留原来位置进行定位 position:relative; 相对于自己原来的位置进行定位。绝对定位(absolute)         脱离原来位置进行定位 position:absolute; 相对于最近的有定位的父级进行定位,如果没有父级,相对于文档进行定位。广告定位(fixed) position:fixed; 不会随页面滚动条滚动而变换位置。 定位中的两个经典BUGmargin塌陷         父子嵌套的元素,垂直方向的margin,父子结合在了一起,共同取最大值。

    bfc(块级格式化上下文) 如何触发一个盒子的bfc: 1.设置position:absolute; 2.设置display:inline-block 3.float:left/right; 4.overflow:hidden;

            解决办法:

    > 例子 html部分 <div class="circle"> <div class="cir1"></div> <div class="cir2"></div> <div class="cir3"></div> <div class="cir4"></div> <di class="cir5"v></div> </div> css部分 *{ margin: 0; padding: 0; } .circle{ position: absolute; left: 50%; top: 50%; margin-top: -93px; margin-left: -190px; } .cir1, .cir2, .cir3, .cir4, .cir5{ position: absolute; width: 100px; height: 100px; border: 10px solid black; border-radius: 50%; } .cir1{ border-color: blue; left: 0; top: 0; } .cir2{ border-color: red; left: 130px; top: 0; z-index: 1; /*改变红环层数*/ } .cir3{ border-color: yellow; left: 260px; top: 0; } .cir4{ border-color: green; left: 65px; top: 70px; } .cir5{ border-color: pink; left: 195px; top: 70px; }

    两栏布局

    先写右侧盒子,再写左侧盒子 html部分 <div class="right"></div> <div class="left"></div> css部分 *{ margin: 0; padding: 0; } .right{ position: absolute; right: 0; width: 100px; height: 100px; background-color: pink; } .left{ margin-right: 100px; height: 100px; background-color: blue; }

    浮动模型(float)

    Processed: 0.011, SQL: 9