选择器高级
选择器高级
选择器高级主要是基础选择器的各种组合，分为以下三个：
1.群组选择器
<style> /* 群组选择器:可以同时控制多个标签 */ /* 选择器位通过逗号隔开，每一个选择器位都可以为id、class、选择器组合 */ a,.p2,#p1{ height: 10px; } /* 这样就可以同时修改3个标签的样式 */ </style>
2.后代（子代）选择器
<!--后代选择器通过空格隔开,会在前面标签的所有后代标签中匹配--> eg: .d1 .h1 <!--子代选择器通过大于号隔开，只会在前面标签的所有子代标签中匹配--> eg: .d1>.h1 <!--后代子代选择器控制的只是最后一个标签，前面的都是修饰-->
3.兄弟选择器
<!--兄弟选择器通过波浪号~隔开，会匹配前面标签下面的兄弟标签--> eg：.d1~.h1 <!--相邻选择器通过加号+隔开，会匹配前面标签下面的相邻标签--> eg：.d1+h1 <!--兄弟相邻选择器控制的也只是最后一个，前面都是修饰--> <!--兄弟相岭选择器存在的问题：无法匹配第一个-->
伪类选择器
<!--伪类选择器--> <!--见到: 或者是::就是伪类选择器--> <!--伪类选择器影响优先级，一个伪类选择器相当于一个class--> :nth-child() :nth-of-type() 括号里面都是填的数字，并且是从1开始编号 :nth-child() <!-- 会先匹配层级关系，就是编号（每一个标签在父类标签中的编号）--> <!-- 匹配上了之后再匹配:之前的选择器--> :nth-of-type() <!-- 会先匹配:之前的选择器（在同一个父级标签中）--> <!-- 再匹配层级关系，选择控制的标签-->
a标签的四大伪类
<!--a标签为超链接标签--> <!--有四种伪类--> 1、 a:link <!-- a标签的初始化状态，就是没有点击过的状态--> 2、 a:hover <!-- a标签的悬浮状态，就是鼠标放在上面的状态--> 3、 a:active <!-- a标签的激活状态，就是鼠标点击下去的状态--> 4、 a:visited <!-- a标签的访问过后的状态--> <!--其中最重要的是悬浮状态与激活状态-->
css样式
文本样式
<!--字体大小（默认16px）--> font-size: 16px <!--字族 可以跟多个（后面代表备用字体）--> font-family: "微软雅黑" <!--字体颜色--> color: black <!--水平位置 left center right--> text-align: center <!--行高 默认文本在行高的垂直居中，要实现文本的垂直居中，让文本行高等于容器高--> line-height: 100px <!--字重（粗细）100 - 900 或者用单词表示 --> font-weight: 100px <!--文本划线 underline overline line-through none--> text-decoration: underline <!--字体样式（斜体、加粗之类）--> font-style: normal
背景样式
/*背景颜色*/ background-color: red; /*背景图片 （会覆盖背景颜色）*/ background-image: url(""); /*平铺 no-repeat 不平铺 repeat-x X轴平铺 repeat-y Y轴平铺*/ background-repeat: no-repeat; /*背景定位 x轴(left center right) y轴(top center bottom)*/ background-position-x: left; /*也可以指定尺寸 x轴 y轴*/ background-position: 10px 10px; /*精灵图指的是一张图片上有很多的页面内容，我们可以通过移动图片的位置来实现我们想要的效果*/
边界圆角
/*边界圆角 border-radius*/ /*只指定一个参数 百分号 或者 指定值*/ /*四个角都会做边界圆角的处理*/ border-radius: 10px; /*指定多个参数*/ /*最多能指定四个参数，顺序从左上开始顺时针旋转，如果没有被指定就会去找对角的值 */ border-radius: 50% 10px; /*x轴y轴分开指定，x轴y轴的参数需要用/分来，顺序一样，没有找对角*/ border-radius: 10px / 0 10px;
显示方式
显示方式分为四种 block: 1.可以指定宽高 2.自带换行 3.支持所有css样式 inline：1.宽高只能由文本撑开，不能自定义 2.不能换行 3.支持部分css样式 inline-block：1.可以指定宽高 2.不带换行 3.支持所有css样式 none 没有显示方式，就会在页面中隐藏 嵌套关系 block：可以嵌套 block、inline、inline-block div li 用来搭架构，可以任意嵌套 h1~h6 p只建议嵌套inline，就是用来转成文本的 inline：只嵌套inline span i b em strong a一般都会修改他的显示方式display为block inline-block 不建议嵌套任何标签 img input 都设计成了单标签
block的显示规则
/* 不同的显示规则是不同的 完成复杂的布局和样式都采用block的显示方式 block：分行显示 如果不去设置比宽高，宽度默认继承父标签 高度由内容撑开 inline：同行显示 宽高由内容撑开不用额外操作 inline-block：同行显示，一般会主动设置宽高，单独设置宽、高会等比缩放 */
overflow属性
/* 我们先来看两个问题 1.规定了标签的宽高，标签的内容超出了范围 2.规定了标签的宽高，标签的子标签更大，超出了范围 如何让父级宽高限制内容和子集overflow hidden：隐藏，超出父级标签范围都会被隐藏起来 auto：有超出的内容才会以滚动条显示超出的内容 scroll：不管有没有超出内容，都会以滚动条的方式显示超出内容 */
布局
盒模型
/* 盒模型 什么是盒模型：页面中的每一个标签都是一个盒模型 盒子的组成：外边距、边框、内边距、内容四部分组成 外边距：margin 控制盒子的整体位置 边框：border 控制边框的大小、颜色、样式 内边距：padding 控制文本内容距离边框的距离 内容：content 文本内容或者子标签的显示区域 */ /*margin参考系：自身原有的位置*/ /*left 和 top 移动的是自身位置*/ margin-left: 10px; /*自身会向右移动10px*/ /*right 和 bottom 控制的是兄弟标签位置*/ margin-bottom: 10px; /*会把兄弟标签向下撑10px*/ /*margin可以指定四个参数(也是没有参数就找对边)： margin top right bottom left*/ margin: 0; /*表示四个边都是0*/ margin: 0 auto; /*上下边是0 左右对半分(表示居中)*/ /*border 宽度 样式(solid实线 dashed虚线 dotted点状线) 颜色*/ border: 1px solid red; /* padding：控制的是内容和边框的距离 所以当你想要移动内容，又想内容全部显示出来 那就需要向哪移动多少，内容content就得向反方向移动多少 */
浮动布局
/* 浮动布局 float 我们都知道，显示方式为block的标签都是自动换行的，不能同行显示 那么想要同行显示，就得用到浮动布局 一旦用了浮动布局：标签就不再撑开父级的高度了，但是会收到父级宽度的影响 float:left 从左开始浮起排序 right就是从右浮起 不再撑起父级高度之后父级高度就为0，一旦父级下面还有兄弟标签，就会和浮起的标签重合 如何避免重合的问题：清浮动 (就是让父级标签获得一个刚刚好的高度，可以容下浮起的标签) content: ""; display: block; 清浮动的关键 clear: both; 就可以让父级清浮动 */
div:after{
content: ""; display: block; clear: both;
}