1 width属性
宽度的表示方式有三种 长度 百分比 auto
百分比的方式适用于自适应布局
盒子模型的概念
height属性
高度和宽度一样有三种表示方式
那些元素可以设置width 和height
boder边框属性
- 边框宽度 border- width
- 边框颜色 border-color
- 边框样式 border-style
设置元素边框宽度
border-width : thin | medium | thick | 长度值
padding填充属性
padding值的表示方式可以是 具体的长度值 | 也可以是 百分比形式
注意padding不能为负数
margin外边框属性
和 padding类似但是要注意的是margin 值可以为负数
默认情况下 块级元素会有margin外边框属性值
和 padding 类似
注意
有时可能会出现设置样式之后发现没有效果，就有可能是这种原因
还要注意的是
如果只是设置 上 或 下的margin元素值为 auto则其中一个这是auto的margin为 0
盒子模型的计算
总的来说
盒子总的宽度 = 左右外边框 + 左右外边距 + 左右内边距
盒子总的宽度 = 上下外边框 + 上下外边距 + 上下内边距
display属性
- 也就是内联元素无法设置宽高
水平方向 margin和padding可以用，因为内联元素活动范围是在一行内
垂直方向不可以用 - 块级元素设置为block都可以用，因为本身就是这个属性
inline-block就是活动范围在一行内（前后没有换行符），但是又能设置宽高
-
使用display: none; 的元素，会隐藏该元素，并且不占据页面空间
-
visibility 可以用来色湖之元素的隐藏和显示状态，
可选值
visible 默认值 元素会默认在页面显示
hidden 元素会隐藏不显示，但是和display：none不同的是，这样设置会占据页面位置
也就是这个位置依旧保持
是 子元素 在 父元素中显示
overflow : visible
overflow: hidden;
overflow: scroll;
overflow:auto:
会根据需求加滑动块注意这个块是父元素加上的