2020.10.2 CSS 沙盒模型

权重的叠加

1.如果是复合选择器 则会存在权重的叠加问题

2.权重不存在进位

沙盒模型
网页制作步走
构建盒子
设计 盒子位置
填充盒子内容

1.盒子边框border

border-style: solid(实线) dashed(线虚线) doted(点虚线)

border fight left top bottom

border复合写法 border: solid red 1px;

2.表格边框

tr

border-collapse: collapse:() 将两个边框合并

3.padding内边距

padding: top bottom legt right

(padding的简介写法
当有四个值时:按顺时针方向设置的
)
padding的运用:
使字数不同的盒子字体间距里相同:

新浪导航栏案例:
html:

css:

效果
注意:padding会影响盒子的大小 需要将盒子大小减去内边距
只有在 父亲盒子没有指定 高度和宽度 子代 padding才不会影响盒子大小
/
/
//
/
/
/
/
/
4.margin外边距
语法 和 padding一样
margin应用:
1.盒子位置设置
块内元素水平居中:margin: 0 auto;(前提盒子必须有宽度不能和页面等宽)
行内,行内块元素居中对齐:找其父级元素 text-align: center;
2.父级盒子随着自己盒子塌陷问题:
子级盒子更改margin使得 父级盒子一起动
解决方法:

3.清楚浏览器的编剧元素
*{
padding 0;
margin 0;
)
4.行内元素只能设置水平外间距