边框属性
边框左侧格式:
border-left-color:green;
border-left-width:5px;
border-left-style:solid;
上述所有的属性名前缀都一样 所以可以简写为:
border-left:5px solid yellow
边框上方格式:
border-top-color:red;
border-top-width:10px;
border-top-style:dashed;
上述所有的属性名前缀都一样 所以可以简写为:
border-top:10px dashed red
边框右侧格式:
border-right-color:yellow;
border-right-width:3px;
border-right-style:dotted;
上述所有的属性名前缀都一样 所以可以简写为:
border-top:3px dotted yellow
边框下方格式:
border-bottom-color:pink;
border-bottom-width:8px;
border-bottom-style:solid;
上述所有的属性名前缀都一样 所以可以简写为:
border-bottom:8px solid pink
终极缩写形式:上下左右全部采取一样的样式:
border:5px solid black
如何画圆:
border-radius:50%
![](https://s3.bmp.ovh/imgs/2021/08/b0a93ab732b8f97d.png)
display属性(了解)
display:none
钓鱼网站
看上去是一个与正规网站一模一样的页面(银行网站),
实际上却是利用display隐藏提前写好的骗子数据,
从而实现狸猫换太子的效果。
盒子模型
margin用来调节标签与标签之间的距离
标签与标签可以彼此独立也可以嵌套
padding用来调节标签与标签内部(文本或者标签)的距离
margin-left:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
上述前缀一致 那么可以缩写成下列形式
一个参数表示上下左右:margin:10px
第一个控制上下 第二个控制左右:margin:20px 40px
第一个控制上 第二个控制左右 第三个控制下:margin:20px 30px 40px
上右下左(顺时针):margin:10px 20px 30px 40px
![](https://s3.bmp.ovh/imgs/2021/08/26a4379bc3f80c9b.png)
浮动属性(重要)
float
在页面布局中肯定需要用到浮动。
浮动的元素脱离文档流,相当于漂浮在空中。
浏览器针对文本是优先展示的(想法设法的展示出文本)。
浮动带来的影响
浮动的缺点:浮动会导致父标签元素"塌陷"
1.推导步骤一(不可取)
自己再写一个div撑着
2.推导步骤二(不好理解)
clear属性
clear:left、right、both
3.终极结论(记住就可以)
.clearfix:after {
content:'';
display:block;
clear:both
}
PS:在写css代码之前先写好上述解决浮动带来塌陷的css代码,
哪个父标签塌陷了就给哪个父标签加一个clearfix类属性即可。
![](https://s3.bmp.ovh/imgs/2021/08/510d104fe5f1d941.png)
溢出属性
overflow
圆形头像制作:注意图片比例
div{
width:100px;
height:100px;
border:3px solid black;
border-radius:100%;
overflow:hidden
}
img{width:100%}
![](https://s3.bmp.ovh/imgs/2021/08/5f303a06c3c52421.png)
定位属性
非定位态(静态)
static
所有的标签默认都是非定位状态,无法使用定位改变位置
相对定位:相对于标签原来的位置做定位
position:relative
绝对定位:相对于已经定位过的父标签做定位
position:absolute
固定定位:相对于浏览器窗口做定位
position:fixed
![](https://s3.bmp.ovh/imgs/2021/08/8d168a78792a87bb.png)
是否脱离文档流
脱离文档流:可以简单的理解为原来的位置是否可以被其他标签占用
脱离文档流:
浮动
绝对定位
固定定位
不脱离文档流:
相对定位
![](https://s3.bmp.ovh/imgs/2021/08/5e8ea829ea8cfd46.png)