盒子模型
margin 外边距
border 边框
padding 内边距
盒子的计算方式:你的元素到底的多大?
margin+border+padding+内容宽度
边框
1)粗细
2)样式
3)颜色
/* border: 粗细,样式(solid 直线,dashed 虚线),颜色*/
border: 1px solid red
内外边距
padding: margin:
后面一个元素代表上下左右
后面两个元素,第一个代表上下,第二个代表左右
后面四个分别代表上左下右
auto :自动对齐
居中:
margin:0 auto;
要求:要有块元素,块元素有固定的宽度
圆角边框
border-radius 一个值 左上 右上 右下 左下 两个值 第一个值:左上右下 第二个值:右上左下 四个值(顺时针)左上 右上 右下 左下
圆圈: 圆角=半径
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
盒子阴影
x,y,模糊半径,颜色
box-shadow: 100px 10px 1px yellow;
浮动
1)块级元素:独占一行
h1~h6,p,div,列表......
2)行内元素:不独占一行
span,a,img,strong......
行内元素可以被包含在块级元素,反之不可以
display
display: block 块元素 inline 行内元素 inline-block 是块元素,但是可以内联,在一行 none 不存在
float
float: right 右浮动 left 左浮动
对比:
display方向不可以控制,不需要管父级边框塌陷问题
float浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷问题
父级边框塌陷问题
clear: right 右侧不容许浮动 left 左侧不容许浮动 both 两侧都不容许浮动
若不容许的一侧已经有浮动,会排练到浮动的下一级
解决方案:
1.增加父级元素的高度(简单,但元素假设有了固定的高度,就会被限制)
2.增加空的div标签,清楚浮动(简单,但代码中尽量避免空div)
3.overflow(简单,但下拉的一些场景避免使用)
在父级元素中增加一个overflow :hidden 对内容修剪
overflow :scroll 增加滚动条
4.父类增加一个伪类:after(推荐使用,写法稍微复杂,但是没有副作用)
#father:after{
content: "";
display: block;
clear: both;
}