CSS简介：
css：Cascading Style Sheet 层叠样式表，简称样式表
css的目的是实现网页布局，对网页进行美化
学习CSS其实就是学习一堆的选择器和属性。
CSS语法：
引入CSS
·行内样式
直接在标签里添加style属性，如：
<p style="color: red;"></p>
·内部样式
写在头部标签head中，如：
<head>
<style>
</style>
</head>
·外部样式
内容写在后缀为.css的文件在中，通过link标签在头部标签head中引用，如
<head>
<link rel="stylesheet" href=" ">
</head>
基本选择器
·标签选择器
最简单的选择器，选中页面中同类型的标签
·ID选择器
先起一个id名 然后通过#id名来选中
行业的潜规则：ID名一般是唯一的起名字时注意以下几点：
1）以英文字母开头
2）区分大小写
3）可以有数字，下划线，短横线
4）#和名字之间不要有空格
·CLASS选择器
先起一个class名 然后通过.class名来选中
CLASS起名字时注意以下几点：
1）以英文字母开头
2）区分大小写
3）可以有数字，下划线，短横线
4）.和名字之间不要有空格
·其他选择器
·通配符选择器 *{ margin:0; padding:0}
·伪类选择器 a:hover
·分组选择器 , 隔开
·后代选择器 空格 隔开
本人强烈建议后面的您可以不用看了，强烈建议
文字设置
·font-style
设置字体是否倾斜
·italic 表示倾斜
·normal 表示不倾斜
注意：italic 和 oblique 都能让字体倾斜 ,前者会找到新的斜体字型来替代，后者就是普通的倾斜。
如果是中文，你想让中文进行倾斜，统一使用 italic
·font-weight
设置字体的是否加粗
·bold 表示加粗
·normal 表示不加粗
·font-size
设置字体的大小
不同的浏览器的默认字体是不同的，有的12px，有的是14px。
谷歌浏览器最小字体是12px ，低于12px，会以12px进行显示。
·font-family
设置字体的类型
一般会设置多种字体，计算机优先选择前面的字体，前面的字体没有，则会以此向后选择，直到使用默认字体。
·color
设置字体的颜色
·单词表示法
·rgb表示法
·16进制表示法
注意：a 标签并不能继承颜色属性，需要单独另外设置
·font
设置字体的复合属性
·font:font-style font-weight font-size font-family
·font-style和font-weight 可以不写
·font-size 和font-family必须要写，且位置不能换
各个属性之间用空格隔开
小知识：在使用 font 这个复合属性时，常常将 line-height（行高）与 font-size写在一起，font-size / line-height
文本设置
·text-decoration
设置文本的修饰线
·underline 下划线
·overline 上划线
·line-through 删除线
·none 无
·text-indent
设置文本的缩进
单位：em em是字体的高度，常用2em来缩进段落
·text-align
设置文本的水平对齐方式
·left 默认值
·center 居中对齐
·right 右对齐
·justify 只对英文有效，两端对齐
·line-height
设置文本的行高
·使用px设置
·使用倍数设置
小知识：当 line-height等于盒子高度时，可以实现水平居
真的不要再看了
盒子模型
·width
设置盒子的内容宽度
表示元素的宽度，不是指盒子的宽度
盒子的宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
·height
设置盒子的内容高度
表示元素的高度，不是指盒子的高度
盒子的高度：height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
·padding
设置盒子的内填充
表示内容与边框之间的距离，是四个方向的复合属性，可以分开写
padding-top:上填充
padding-right:右填充
padding-bottom:下填充
padding-left:左填充
也可以只写一个padding，后面可以跟上1个值，2个值，3个值，4个值：
1个值：padding:10px; 表示4个方向上的内填充都是10px
2个值：padding:10px 20px; 第1个值表示上下，第2个值表示左右
3个值：padding:10px 20px 30px; 第1个值表示上下，第2个值表示左右，第3个值表示下
4个值：padding:10px 20px 30px 40px; 顺序是上，右，下，左
·border
设置盒子的边框
复合属性，由三部分组成
border-width：边框的粗细
border-style：边框的样式
border-color：边框的颜色
注：与padding一样，也是四个方向的复合属性
·margin
设置盒子的外填充
width、margin-left 和 margin-right 可以设置为 auto
当3 个都为 auto，则两个外边距都会设置为 0，而 width 尽可能能宽
设置 margin时，经常会出现块状元素重叠现象，解决办法如下
兄弟元素重叠：只设置 margin-top或 margin-bottom
父子元素重叠：父元素加 padding或 border
注：与padding一样，也是四个方向的复合属性
·background
设置盒子的背景颜色
background-color： 颜色值
background-image：url （） 添加图片
默认情况下，如果图片小于元素，在水平和垂直方向上都会重复这张图片
默认情况下，图片的左上角与元素的左上角对齐
background-repeat 用来控制背景图片在元素中水平和垂直方向上是否重复
repeat 也是默认值，在水平和垂直方向上都平铺
no-repeat 完全不重复， 有且只有一张图片
repeat-x 在水平方向上平铺
repeat-y 在垂直方向上平铺（向下为正
background-position 用来设置背景图片的位置
格式： background-position:position-x position-y
使用关键字： top, left, right, bottom
使用百分比： 0%, 50%, 100%(不常用
使用像素值： 25px, 100px
如果使用像素值作用属性值时，可以设置负值
除了像素值，还可以使用关键字： 水平方向有：left center right
垂直方向上有：top center bottom
background-attachment 定义背景图片是随着元素的滚动还是固定（几乎不用）
scroll 表示背景图片会随着滚动条的滚动而滚动
fixed 固定
background 中的背景颜色，默认值 transparent, 透明的
background 所覆盖的区域，包括 padding 和内容区域
在设置背景时，很容易覆盖前面的设置。原因是 background 的顺序是有要求
不要写两个background 属性
把背景颜色也写在 background 这个复合属性里面
行级元素对于 width 和height 不适用，对于 margin 和 padding 在垂直方向不适用
float布局
float: left / right / both
目的：让行标签并排显示
浮动有三大特点，四大表现
特点：包裹性，破坏性，块级框
表现：脱标，贴靠，字围，收缩
清除浮动影响
overflow:hidden; 父元素影响
clear:both; 下面的兄弟元素影响
display 显示的意思 用来设置元素显示状态
block：块 inline：行内 none：隐藏 inline-block：行内块
设置为 none 后，完全不占页面的任何空间
flex布局
flex布局：弹性布局
flex的目的：让男标签可以并排显示
如果使用Flex布局，就不需要想浮动和清除浮动了。
lex布局四个概念：
容器：如果给盒子加上了display:flex，那么这个盒子就是容器。
项目：容器的直接子元素就是项目（儿子），默认情况下，项目是水平向右排列。
主轴：默认主轴水平向右，项目就在主轴上进行排列，项目的排列方向就是主轴的方向。项目是从主轴的起点开始排列（把握住）
交叉轴：和主轴垂直的那个轴就是交叉轴。
关于容器的相关的属性(6个（其实就5个）)
flex-direction：设置主轴的方向
flex-wrap：控制是否换行
flex-flow：是前两个是的简写
justify-content：如果主轴上有富余空间，处理主轴上的富余空间
align-items：如果有一根主轴，处理交叉轴上的富余空间
align-content：如果有多根轴，处理多根主轴的富余空间
flex-direction： 用来改变主轴的方向 direction 是方向的意思
row: 默认的方向 水平向右 起点在左 终点在右
column：垂直向下 起点在上 终点在下
row-reverse: 水平向右 起点在右 终点在左
column-reverse: 垂直向上 起点在下 终点上
flex-wrap: 当项目一行装不下时，是否换行
nowrap: 默认值 表示不管有多个项目 都进行宽度的压缩 不换行
wrap: 当一行装不下时，自动换行
wrap-reverse: 用的不多 从容器下面开始分布，满一行换行 了解就ok了~
flex-flow：flex-direction属性和flex-wrap属性的简写形式
flex-flow:row wrap; = flex-direction:row; + flex-wrap:wrap;
justify-content： 处理主轴上面的富余空间 jutify意思是：调整使全行排满;使每行排齐;使齐行
flex-start: 默认值 表示项目从主轴的开始位置排列 富余空间就是最后面
flex-end：表示项目从后开始排列 富余空间在前面
center：表示项目从中间开始排列 富余空间在两侧
space-between: 富余空间在项目和项目之间
space-around: 富余空间环绕项目
align-items:
项目在交叉轴上如何对齐 如何处理项目在交叉轴上的富余空间
flex-start：表示项目在交叉轴的开始位置开始排列 富余空间在下面
flex-end: 项目在交叉轴的终点位置开始排列 富余空间在上面
center： 项目在交叉轴的中间位置开始排列 富余空间上下都有
baseline: 项目的第一行文字的基线对齐
stretch: 默认值 如果项目未设置高度或设为auto，将占满整个容器的高度(撑满整个交叉轴)
align-content: 用来设置多根主轴的位置关系，如果就一个主轴，此属性没有效果
有多根主轴后，如何处理它们在交叉轴上的富余空间。
使用这个属性的前提：1）肯定要允许换行 3）有多根主轴
flex-start： 多根主轴从上进行排列 富余空间在下面
flex-end： 多根主轴从下进行排列 富余空间在上面
center: 多根主轴从中间进行排列 富余空间上下都有
space-between: 富余空间在多根主轴之间
space-around ：富余空间环绕多根主轴
关于项目的相关的属性： 下面的6个属性一定是加给项目的
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow： grow 表示生长 如果有富余空间 可以让项目长大 了解
flex-shrink： 压缩 在不换行情况下 一行装不下了 设置每一个项目的压缩比例 了解
flex-basis：设置项目在主轴上占多少比例
align-self：处理单独一个项目它在交叉轴的富余空间
flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
哎，既然已经看到这了，那就看完吧
层布局定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
static 不定位，流动布局
相对定位 position:relative
top, right, bottom, left 设置偏移距离
相对于其正常位置应该出现在哪里，保持其未定位前的形状
原本所占的空间仍保留，作为绝对定位的参考点
绝对定位（子绝父相） position: absolute
相对于其父定位元素，元素会从文档流中完全删除，生成一个块级框
position:relative 用来设置参考点 未设置找父的父：body
z-index: 来确定位置，值越大，就越靠上
固定定位 position:fixed 配合 top, left, right, bottom
固定定位的参考点是当前窗口
列表布局
list-style-image: 给列表项使用图片作为符号，数字 list-style-position: 列表项符，数字的位置 list-style-type: 列表项符号、数字类型 list-style 也是一个复合属性经典用法：list-style:none list-style-type:none;
表格设计
table tr th/td
caption 表格标题 thead tbody tfoot
border-collapse: 设置表格边框
separate 分隔，默认值 collapse 消融，融合
caption-side: 标题所处位置
top 表格上方 bottom 表格下方
border-spacing 单元格边框之间的距离
background 默认颜色透明的 transparent
居中方案
水平居中方案：
text-align: center; 让盒子中的文字，图片，input输入框等水平居中。
margin:0 auto; 让一个盒子水平居中 0设置盒子上下的margin auto表示盒子左右的margin，auto尽可能的大
垂直居中方案：
line-height:盒子的高度 让文本垂直居中 只适于单行的文本 不适用于多行
大杂烩（看不懂）
lable 行内元素 id属性声明一个值
溢出 overflow
visible 表示可见的，默认
hidden 隐藏
scroll：生成一个滚动条 左和下都有
auto 自动 有滚动条，width不变，内容区变小
display:block;
行内元素变成块级元素 inline 行内
none 隐藏，不显示，完全不占据空间。 inline-black 行内块
border-radius:15px;
设置边框圆角
white-space 指定元素内的空白怎么处理
white-space: nowrap; 不换行，直到遇到<br>标签
overflow: hidden;
text-overflow: ellipsis; 显示省略符号来代表被修剪的文本。
看不懂没关系，因为我好像也看不懂，嘻嘻
时间也有点紧，本人要去敲代码了，曾立志敲三十年代码
所以导致后面略显粗糙，而且也没加实例代码
如果有需要的点个关注，评论一下，鄙人再整理一份CSS精华大全免费赠送
扫一扫
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
