css属性
基本属性:wight,height,background
字体属性:
| 属性 | 描述 |
|---|---|
| font-size:20px; | 字体大小 |
| color:red; | 字体颜色 |
| font-family:字体名称 | 设置字体 |
| font-weight:100-900/nomal=400 /bold=700 /bolder=900 | 字体加粗 nomer不加粗 bold加粗 bolder更粗 |
| font-style:nomal/italic | 不倾斜/倾斜 |
| text-align;left/center/right | 文字水平对齐方式 |
| text-decoration:none; text-decoration:underline; text-decoration:overline; text-decoration:line-through; | 清除线条 下划线 上划线 删除线 |
| letter-spacing:10px; | 字间距 |
| line-height:100px; | 行高 |
盒子模型
一个标签就是一盒子，网页可以看成盒子和盒子从上到下，从左到右或者嵌套的方式进行排列
盒子模型有上下左右四个方向
盒子模型组成：
- 内容
- 内填充padding
- 外边距margin
- 边框border
元素宽度=内容宽度+左右内填充+左右边框 元素高度=内容高度+上下内填充+上下边框
内填充padding
内填充的值可以是像素，百分比；不可以是负数auto
| 属性 | 描述 |
|---|---|
| padding-left:10px; | 左内填充 |
| padding-right:10px; | 右内填充 |
| padding-top:10px; | 上内填充 |
| padding-bottom:10px; | 下内填充 |
| padding:10px; | 上下左右内填充 |
| padding:10px 20px; | 上下10 左右20 |
| padding:10px 20px 30px; | 上x10 左右20 下30 |
| padding:10px 20px 30px 40px; | 上10 右20 下30 左40 （上右下左） |
引发问题：
- 会将元素撑大
- 行内元素只作用于左右，不作用于上下
解决办法：
- 元素宽度-左右内填充 元素高度-上下内填充
- 给元素加 box-sizing:border-box;
外边距margin
margin的值可以px，%，- auto
| 属性 | 描述 |
|---|---|
| margin-left:10px; | 左外边距 |
| margin-right:10px; | 右外边距 |
| margin-top:10px; | 上外边距 |
| margin-bottom:10px; | 下外边距 |
| margin:10px; | 上下左右外边距 |
| margin:10px 20px; | 上下10 左右20 |
| margin:10px 20px 30px; | 上x10 左右20 下30 |
| margin:10px 20px 30px 40px; | 上10 右20 下30 左40 （上右下左） |
| margin: auto ==margin: 0 auto ; | 左右居中 |
引发的问题：
- 子元素的margin-top作用于父元素，解决办法：给父元素设置overflow:hidden;
- 上下边距重叠，大的边距为准
- 行内元素只作用于左右，不作用于上下
边框border
| 属性 | 描述 |
|---|---|
| border-left-width:20px; | 左边框宽度 |
| border-left-color:red; | 左边框颜色 |
| border-left-stely:solid; | 左边框类型-实线 |
| ... | |
| border-left:20px solid red; | 左 |
| border-right:20px solid red; | 右 |
| border-top:20px solid red; | 上 |
| border-bottom:20px solid red; | 下 |
| border:20px solid red; | 上下左右 |
边框类型
- solid 实线
- dashed 虚线
- dotted 圆点实线
- double 双实线
- ridge 凹槽边框
- inset 内阴影
- outset 外阴
引发问题：会将元素撑大
解决办法：
- 元素宽度-左右边框 元素高度-上下边框
- 给元素加 box-sizing:border-box;
浮动
为了让块元素排列在一行显示
float：
- none 默认
- left 左浮动
- right 右浮动
浮动引发的问题：
- 如果元素需要排列在一行显示，所有元素都应该设置浮动
- 右浮动之后元素位置颠倒(调整布局)
- 浮动元素脱离文档流。后面的内容会顶上去
- 子元素浮动后，父元素的高度不会自动撑开
- 如果块元素和行内元素需要排列在一行显示，那么行内元素也应该加浮动
- 如果浮动元素高度不一致，一行放不下 会出现卡住的现象
清除浮动的方法“
-
给父元素加 overflow:hidden;
-
在浮动后面添加空元素设置clear：both
<div style="clear:both"> </div> -
采用css伪元素选择器
父元素::after{ content:""; display:block; clear:both; }
定位
当元素出现层叠样式 或者 让元素固定在页面某一个位置不变的时候，应该用定位
position：
-
static 默认值
-
relative 相对定位：
参照物是元素本身
-
absolute 绝对定位：脱离文档流
参照物是具有第一个定位属性的父元素，如果父元素都没有定位，那么参照物是浏览器窗口
-
fixed 固定定位：脱离文档流
参照物 浏览器窗口
表现：固定在页面某一位置不变
定位层级
通过z-index来调整
默认0
值范围：-1~无穷大
如果z-index没有定位属性，则该属性不生效
