盒模型
作用 规定元素相互之间的位置关系(调间距调位置)
组成部分 content(内容区域 元素自身的大小)、padding(内边距)、border(边框)、margin(外边距)
标准盒模型的组成部分: content、padding、border、margin
- 盒子自身的大小 content + padding + border
- 盒子真实的大小 content + padding + border + margin
CSS属性
1. 浮动属性
作用:改变元素的位置
属性:float
属性值:left、right、none
说明:
浮动只能在水平方向移动
会让元素脱离文档流
浮动元素碰到包含框(父级元素的边框)就会停止浮动
浮动元素碰到前面含有浮动属性的元素也会停止浮动
当最后一个子元素的宽度大于父级元素宽度的时候,会往下进行移动直至找到足够的空间停止浮动
2.内边距(padding)属性
作用:填充补白、内边距 一般用来调整父级与子级元素之间的位置关系
添加位置:
添加到父级元素上:会撑大当前容器的大小 不影响页面布局 需要减去相应的padding值
添加到子级元素上:会撑到当前容器的大小
属性:padding
属性值:数值+单位(像素px)
padding的方向:padding-top / right / bottom / left
属性值设置:
一个属性值:上下左右
两个属性值:上下 左右
三个属性值:上 左右 下
四个属性值:上右下左
padding不能设置负值
3.外边距(margin)属性
作用:用来设置同级元素之间的位置关系
属性:margin
属性值:数值+单位(像素px)
margin的方向: 前端的方向都是顺时针的 margin-top / right / bottom / left
属性值设置:
一个属性值:上下左右
两个属性值:上下 左右
三个属性值:上 左右 下
四个属性值:上右下左
margin是可以为负值
设置margin的时候必须要有包含框的接触
总结: 关于内外边距的一些固定用法
设置浏览器的默认样式 *{margin:0;padding:0}
设置版心居中 版心选择器{margin:0 auto}
margin常见的bug
1. 有两个元素(父子级关系) 给子级元素设置margin-top的时候 会错误的解析到父级元素
- 把margin改成padding
- 给父级添加边框属性
- 前端解决布局用的最多的方法: 文本溢出属性 overflow:hidden
2. 同级元素上下排列 margin-bottom/top 错误解析 解析之间的最大值
- 只给一个方向添加即可
4.边框(border)属性
作用:给元素添加边框
属性:
- border-width 边框的宽度(大小)
- border-style 边框的样式
- border-color 边框的颜色
属性值
- 设置边框宽度 数值+单位
- solid(实线) dashed(虚线) dotted(点线) double(双实线)
- 颜色
简写:
属性: border
属性值: border-width border-style border-color
改变某一个方向上的属性
border-top-width/style/color
改变某一个方向上的所有
border-方向:border-width border-style border-color
清除某一个方向上的边框/清除边框
清除边框: border:0/none
清除某一个方向上的边框 border-方向值:0/none
5.文本字体属性
5.1 文本大小
属性: font-size
属性值: 数值+单位(像素px)
法定属性值和常规属性值
常规属性值设置的时候都会添加单位(web中常用的单位是像素px)
浏览器中默认的字体大小是16px
由于浏览器存在差异 规定12px是浏览器中显示的最小字体
建议设置字体的大小为偶数
如果属性值为0 不需要添加单位
5.2 文本字体类型
属性:font-family
属性值:
有中文英文,中文添加引号,英文一个单词不用加,2个以上要加
在浏览器中默认的字体类型是微软雅黑
5.3 文本加粗
属性:font-weight
属性值:
100-500正常字体 600-900加粗字体
bold加粗 bolder更粗
normal 用来清除加粗标签默认样式
5.4 文本倾斜
属性:font-style
属性值:
italic 倾斜的
oblique 更倾斜的
normal 正常字体
5.5 单行文本行高
属性:line-height 属性值:数值+单位(像素px)
文本在垂直方向居中 行高 = 高度
行高 > 高度 文字往下移动
行高 < 高度 文字往上移动
注意:
line-height多用于单行文本
从第一行文本顶部量取到第二行文本的顶部即可
文本水平对齐方式: text-align
left、right、center justify 两端对齐
文本属性的简写
属性:font
属性值:font-weight font-style font-size/line-height font-family
font-weight和font-style可以不写 或者 是互换位置
font-size/line-height 固定写法 不能改不能换位置
font-family 可以默认 但是不能不写
5.6 文本颜色
属性:color
属性值:
常见的英文单词 green、yellow、red、pink
十六进制: 0-9/a-fA-F(大小写不区分) #任意组成的六位字符
- 常见的十六进制 #ffffff #000000 #cccccc
- 六位字符一样的时候可以省略为三位 #0 0 0
其他:
- rgb(red,green,blue) 0-255
- rgba(r,g,b,alpha) 透明度 0-1
透明度的表示方式
rgba()
opacity:0-1
5.7 文本修饰
属性:text-decoration
属性值:
underline 下划线
overline 上横线
line-through 删除线 <del>
none 清除下划线
首行缩进(只针对第一行)
属性:text-indent
属性值: 数值+单位 也可以接负值
字间距: letter-spacing
词间距: word-spacing
6. 列表属性
有序列表、无序列表、自定义列表
有序还是无序列表前面的默认符号样式都是有兼容问题的
1.定义列表的符号样式
属性:list-style-type
属性值:disc(实心圆) circle(空心圆) square(实心方块) none(清除列表的默认样式)
2.使用图片作为列表符号
属性:list-style-image
属性值:url()
3.定义列表符号位置
属性:list-style-position
属性值:inside\outside
4.重要的属性 清除列表样式
属性:list-style
属性值:none
7. 背景属性
1.背景颜色属性
属性:background-color 可以简写成background
属性值:
- 英文单词
- 十六进制
- rgb/rgba
2.背景图片
属性:background-image
属性值:url()
- 当容器大于背景图片的时候 图片会进行平铺 !
- 当容器小于背景图片的时候 图片只显示一部分
- 当容器等于背景图片的时候 图片完整显示
关于图片的使用
- background-image: 是css属性 需要容器大小去支持
- img 是html结构
3. 背景平铺属性
属性:background-repeat
属性值:
- no-repeat 不平铺 只显示一张背景图
- repeat 平铺 默认值
- repeat-x
- repeat-y
4.背景图片定位
属性: background-position
属性值: 两个属性值
- x轴的方向 left right center
- y轴的方向 top bottom center
5.背景图的固定
属性:background-attachment
属性值
- scroll 滚动 默认值
- fixed 固定
6.简写方式
属性: background
属性值: 颜色 图片 平铺 定位 固定
8. 文本溢出属性
8.1文本溢出属性
属性:overflow
属性值:
visible 默认值 正常显示
hidden 隐藏
scroll 滚动
auto 自动
scroll和auto之间的区别
- scroll 样式一直存在 当内容溢出的时候才会有滚动的效果
- auto 当内容溢出的时候有滚动条 无溢出就不显示滚动条
显示省略号的条件: 必须是单行文本
- 容器要有固定的宽高大小
- 让元素固定在一行内显示
- 让超出去的文本隐藏起来
- 隐藏的文本变成省略号
8.2 显示省略号
属性: text-overflow
值: clip (不显示省略号) / elipsis(显示省略号)
8.3 对浏览器中空白空间的处理
属性:white-space
white-space 和 br : br强制性换行
属性值
- nowrap 不换行 常用并且重要
- pre 保留了空白
- pre-line 删除空格 保留换行
- pre-wrap 保留了换行和空格
<pre></pre> 在pre标签里填写内容,代码是什么样,页面就渲染什么样子