CSS练习

1.选择器

1.标签选择器

标签名 {
    属性1： 属性值1;
    属性2： 属性值2;
    属性3： 属性值3;
}

2.类选择器

多类名

<p class="class-name1 class-name2"></p>

3.id选择器

4.复合选择器

• 后代选择器

元素1 元素2 { 样式声明; }

• 子选择器

子元素选择器（子选择器）只能选择作为元素作为元素的最近一级子元素。简单理解就是选亲儿子。

元素1 > 元素2 { 样式声明; }

• 并集选择器

元素1, 元素2 { 样式声明; }

• 伪类选择器

a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
a:focus 伪类选择器用于获取焦点的表单元素。
:first-child			所有兄弟元素中的第一个
:last-child				所有兄弟元素中的最后一个
ul li:nth-child(n)			所有兄弟元素中的第n个，n是个数字
2n偶数 2n+1奇数 n+5从第五个到最后 -n+5前五个

5.属性选择器

        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        /* 选择首先是section 然后 具有class属性 并且属性值 必须是 icon结尾的这些元素 */
        section[class$=data] {
            color: blue;
        }

2.类命名规则

 3.字体属性

body {
  font-family: "微软雅黑", Arial, Helvetica, sans-serif;
 font-size: 16px;
  font-weight: 700; 加粗
font-style: normal;
text-align: center;
text-decoration: underline;装饰文本
text-indet: 5px; 2em; 两个文字大小，定义段落首行缩进。
line-height: 5px; 行高
}

4.emmit语法

div{内容$}*5 

5.块,行内,行内块

• 块:h1-h6、p、div、ul、ol、li
• 行内a、strong、b、em、i、del、s、ins、u、span 高、宽直接设置是无效的
• 行内块 img, input、td

元素模式转换

行内->块级

a {
  display: block;
}Copy to clipboardErrorCopied

块级->行内

div {
  display: inline;
}Copy to clipboardErrorCopied

行内/块级-> 行内块元素

span {
  display: inline-block;
}

6.背景

background-color: 颜色值;
background-image: url(图片url);
background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;
background-position: x y;
参数 x 和 y 指 x 左边和 y 坐标或者top / center / bottom / left / center / right 方位名词
background-attachment: scroll | fixed; 背景图片固定

background: rgba(0, 0, 0, 0.3);设置透明度

7.盒子模型

1.边框

属性	作用
border-width	定义边框粗细，单位 px
border-style	边框样式
border-color	边框颜色

/*习惯顺序*/
border: 5px solid pink;

/*注意层叠性*/
border-top: 1px solid red;

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse: collapse;

 2.内边距

box-sizing: border-box 盒子大小为 width

不会撑大盒子,在最后写

 /* padding: 5px; */
 /* padding: 5px 10px; */
 /* padding: 5px 10px 20px; */
 padding: 5px 10px 20px 30px;

1 个值：上下左右
2 个值：上下，左右
3 个值：上，左右，下
4 个值：上，右，下，左，顺时针

3.外边距

margin 属性用于设置外边距，即控制盒子与盒子之间的距离。

• margin-left: 左外边距
• margin-right: 右外边距
• margin-top: 上外边距
• margin-bottotm: 下外边距

margin 简写方式与 padding 一致。

margin: 100px auto;

外边距塌陷 

1. 为父元素添加 overflow:hidden

4.圆角边框

border-radius: length;

 可以用百分比,50%是圆形

接四个值,左上,右上,右下,左下

5.盒子阴影 

bxo-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影（默认是外部阴影）

8.浮动 

float: right;

浮动的盒子不再保存原有位置,浮动的元素具有行内块元素特点

1.清除浮动

1.额外标签法(不常用)

        .clear {
            clear: both;
        }
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>

2.在父盒子加overflow: hidden;

3.为父盒子增加类属性

.clearfix {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}

4.为父元素增加类名

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

 9.CSS书写顺序

10.定位

定位后,行内元素也可以设置宽高

1.相对定位(占位置)

相对于自己定位

选择器 {
  position: relative;
}

2.绝对定位(不占位置)

选择器 {
  position: absolute;
top: ;
right: ;
}

相对于自己爹定位 

3.固定定位

选择器 {
  position: absolute;
}

4.定位次序,都是绝对定位,数值越大越上

选择器 {
  z-index: 1;
}

• overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。

overflow:hidden

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

 CSS高级

1.精灵图

将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。background-position 属性来定位

左移图片和下移图片都是负值

2.vertical-align 属性应用

vertical-align : baseline | top | middle | bottom 

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

2.把图片转换为块级元素 display: block;

3.Flex布局

display:flex

1.原理

就是通过给父盒子添加flex属性，来控制子盒
子的位置和排列方式

2.给父亲添加的css属性

 flex-direction：设置主轴的方向 row column
 justify-content：设置主轴上的子元素排列方式

 flex-wrap：设置子元素是否换行

 align-content：设置侧轴上的子元素的排列方式（多行）

 align-items：设置侧轴上的子元素排列方式（单行）

 flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

 flex-flow:row wrap;

2.子属性

  flex 子项目占的份数

 align-self 控制子项自己在侧轴的排列方式
 order属性定义子项的排列顺序（前后顺序）