目录
css样式表
css即层叠样式表
作用: 修饰页面效果
语法规则: 选择器{属性:值;}
样式创建方式
内部样式
1: 在head中添加style标签
2: 在style中添加样式
外部样式
1: 创建一个独立的css文件 .css
2: 在html文件的head标签中添加
引入方式1: <link rel="stylesheet" type="text/css" href="css文件地址" />
映入方式2: 在style标签中的第一行添加
@import url("css文件地址");
内联样式
<标签 style="属性:值;"></标签>
样式创建权重对比
内联样式 > 内部样式 > 外部样式
【注】内部样式 和 外部样式 收到加载顺序的影响
link 和 @import的区别
1: 前者是标签,后者是css的写法
2: 优先加载link,后加载@import
3: 前者没有兼容性问题,后者有兼容性问题
4: js能操作前者,不能操作后者
背景background
background-color:背景颜色;
颜色单词 十六进制 rgb(0,0,0) rgba(0,0,0,0)
background-image:url("图片地址");
默认是重复的
不占位
background-repeat:是否重复;
no-repeat 不重复
repeat 重复 默认值
repeat-x 水平重复
repeat-y 垂直重复
background-position:背景图定位;
left center right
top center bottom
px
backgroudn-size:背景图大小;
backround-attachment:背景图关联;
scroll fixed
综合写法: background:颜色 图片 是否重复 定位/大小 关联;
多张背景图写法: background:url("")是否重复 定位,url("") 颜色 是否重复 定位;
盒模型
盒模型的组成
内容区域: content width height
补白(填充区域): padding
padding-left:;
padding-top:;
padding-right:;
padding-bottom:;
padding:四个方向;
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;
【注】没有负数，没有auto,会把元素撑大
边框区域: border
外边距区域: margin
margin-left:;
margin-top:;
margin-right:;
margin-bottom:;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
【注】有负数，有auto,不会把元素撑大
外边距常见bug
并列关系(兄弟关系): 垂直方向外边距相遇会重叠
嵌套关系(父子关系): 子元素添加上外边距会溢出,硬气父元素外边距变化
盒模型占位大小计算:
w= width+左右内边距+左右边框+左右外边距
h= height+上下内边距+上下边框+上下外边距
文本溢出相关属性
overflow:;溢出的意思
visible：默认值
hidden超出隐藏，可用于高度坍塌问题中
scroll 内容修剪，出现滚动条
auto如果内容被修剪了，浏览器就会显示滚动条，方便查看其他内容
inherit继承，继承父集的overfl属性值
white-space:;空白空间的意思
normal默认
pre空白会被浏览器保留
pre-line合并空白符序列，保留换行符
pre-wrap 保留空白符序列，但是正常地进行换行
nowrap 内容不换行
text-overflow:;文本超出
clip
ellipsis
显示省略号:(标椎三句)
width:;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
两行文字省略号
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
元素类型转换
display:;
block 块级元素(显示)
inline 行级元素
inline-block 行块级元素
none 隐藏 直接脱离文档，啥都没有了。
list-item 列表元素
元素与元素之间的垂直对齐方式:
vertical-algin:;
top
middle
bottom
【注】只针对行块级元素有效
标尺
<div>
<span style="height:100%;width:0px;display:inline-block;vertical-align:middle;">
</span>
文本会垂直居中
</div>页面布局结构
版心设置
width:;
margin:0 auto;
文档流
普通流: 元素从上至下,从左至右的顺序排列
浮动流: 元素按照浮动的规则排列元素
定位流: 元素按照定位的规则排列元素
定位
position:;
static 默认定位
坐标属性无效
absolute 绝对定位
1: 脱离文档流,不占位
2: 通过坐标属性改变自己的位置
3: 默认参考根元素(html)
4: 参考最近的有定位的父级元素
relative 相对定位
1: 占据文档加流,占位
2: 通过坐标属性改变自己的位置
3: 参考自身载到页面中的初始位置
fixed 固定定位
1: 脱离文档流
2: 通过坐标属性改变自己的位置
3: 参考浏览器窗口
sticky: 粘性定位,具有吸顶效果
1: 结合了relativ 和 fixed 的效果
2: 通过left top 改变自己的位置
包含块
1: 嵌套结构
2: 父元素添加position:relative;
3: 子元素添加position:absolute;
层级关系
z-index:;
数值雨大,层级越高
auto 默认值
【注】只有添加了定位的元素才能修改层级关系（默认定位除外）
居中方式
1 position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
2 position:absolute;
left:50%;margin-left:-元素宽度的一半; top：50%margin-top：-元素一般的高度
锚点:实现页面内容的高度跳转，如点下目录直接跳到相应内容
在同一页面的不同位置进行跳转
1: 点击位置 <a href="#name">点击位置</a>（一定是超链接）
2: 跳转位置 <标签 id="name">跳转位置</标签>
宽高自适应
宽度自适应: 块级元素宽度默认100%,或者 width:100%;
高度自适应: 不写或者height:100%; 前提条件是父元素有高度
一屏页面: html,body{height:100%;}
最小/最大宽高
min-height:;ie低版本不识别 min-height:100px;
height:auto;
height:100px;
min-height:100px;
height:auto !important;
height:100px;
【注】ie低版本不识别最小/最大宽高
float浮动
float:left/right; 元素左浮动/右浮动,
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
但float浮动以后,元素会处于半脱离文档流状态,会造成高度塌陷,内容被遮住等问题,所以有时候需要下方元素清除浮动影响。
清除浮动:指的是清除浮动带来的问题
问题是: 子元素浮动,父元素未设置高度,父元素将高度塌陷
解决办法:
1: 给父元素添加高度
缺点: 不灵活
2: 给父元素添加overflow:hidden;
缺点: 超出父元素区域的内容将被隐藏
3:给浮动元素最后添加一个空的块级元素
clear:both
缺点: 代码冗余
万能清除法
.clearFixed:after{
content:".";
display:block;
width:0;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}伪类选择器
::after{content:"";} 在...内容之后
::before{content:"";} 在...内容之前
:first-letter{}第一个字符样式
:first-line{} 第一行文本样式
【注】只能作用于块级元素
visibility:元素的显示隐藏;
visible 显示 默认值
hidden 隐藏
visibility:hidden; 和 display:none;的区别
1: 都是隐藏
2: 前者占据文档流,后者脱离文档流
表格表单补充内容
表格
thead 表格头
tbody 表格内容
tfoot 表格结尾
th 表头标题
caption 表格标题
<caption></caption>
<thead><th></th></thead>
<tbody></tbody> colgroup 列分组
span="数值" 几列为一组
表格相关的css属性:
border-spacing:边框与边框之间的间距;
border-collapse:;
separate 默认值
collapse 合并为单边框
empty-cells:无内容时单元格是否隐藏;
show 显示
hide 隐藏
table-layout:单元格宽度计算;
auto 单元格随着内容调整宽度
fixed 单元格宽度固定
表单元素
input
type="radio" 单选按钮
【注】name值需要一致
type="checkbox" 多选按钮
disabled="禁用"
checked="默认选中"
type="file" 文件上传域
multiple="可以上传多个文件"
select > option 下拉列表>下拉列表项目
selected="默认选中"
textarea: 多行文本输入框
cols="字符宽度"
rows="字符高度"
默认能拖拽大小 resize:none;
表单:
feldset > legend: 表单字段集
【注】只有一个子集legend
label: 关联标签
for="id值"bfc:是一个特殊的盒子
规则
1: 在bfc盒子内部元素上下排列
2: bfc中的元素左外边距挨着父元素的左边框
3: bfc中的元素垂直外边距将进行重合
4: 浮动元素不与bfc元素重合
5: bfc中的元素不会影响外面的元素
6: bfc元素计算高度时,浮动元素将参与计算
触发方式
1: html
2: float不为none
3: overflow不为visible
4: display为 inline-block table-cell table-caption flex inline-flex
5: position为 absolute fixed
bfc的应用
1: 两列布局
2: 解决元素垂直外边距相遇重合问题
3: 解决浮动元素高度塌陷问题
文本大小写
text-transform 属性控制文本的大小写
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
