选择器高级样式及布局

Posted 2022-03-29 huikejie

选择器高级

选择器高级

选择器高级主要是基础选择器的各种组合，分为以下三个：

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;