前端第三次选择器盒子模型

最新推荐文章于 2024-08-19 17:04:41 发布

yamotl

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量38

点赞数

分类专栏：前端文章标签：前端 javascript css

本文链接：https://blog.csdn.net/yamotl/article/details/133967135

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <!-- 三种样式优先级 行内样式最优先，内部和外部谁在下面谁的优先级最高，就像刷墙，最后一层覆盖之前的-->
    <!-- 内部样式 -->
    <style>
       div{
            color:blue;
            background:yellow;
        }
    </style> 
    <!-- 链接样式单 外部样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
     <!-- 行内样式 -->
     <div style="color: red; background: yellow;">test</div>
     <div style="color: red; background: yellow;">test</div>
     <div style="color: red; background: yellow;">test</div>
     <div>test</div>
     <div>test</div>
     <!-- 如果想给一组div加样式可以用id做区分-->
     <div id="d1">d1</div>
     <div id="a1">a1</div>
     <div id="a2">a2</div>
     <div id="d3">d3</div>
     <div id="d4">d4</div>
     <div>没有id</div>


     <!--div.-->
     <div class=""></div>
     <!--div.aaa-->
     <div class="aaa"></div>
     <p>admin</p>
     <div>
        <p>admin</p>
     </div>
     <div class="gs">qcby</div>
     <!--ul>li*6{qcby$$}-->
     <ul>
        <li>qcby01</li>
        <li>qcby02</li>
        <li>qcby03</li>
        <li>qcby04</li>
        <li>qcby05</li>
        <li>qcby06</li>
     </ul>
     <div>qcby</div>
     <div>qcby</div>
     <!-- div占一块       -->
     <span>qcby</span>
     <span>qcby</span>
     <span>qcby</span>
     <!-- span只占有内容的地方 -->
     <!-- 块级盒子（元素、标签） 独占一行，对宽度高度支持 p div ul li h1~h6-->
     <!-- 内联级盒子（元素、标签） 不独占一行，对宽度高度不支持 a span  -->
     <!-- 内联块级盒子 不独占一行，对宽度高度支持 img input -->
     <!-- 弹性盒子 一个父级元素设置成弹性盒子，其子元素默认始终横向布局 -->
     <!-- dispaly可以改变盒子中种类 block块级盒子 inline内联盒子 inline-block内联块级盒子 flex弹性盒子 -->
     <!-- 将father设置成弹性盒子 -->
     <div class="father">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
     </div>
     <!-- 每个盒子由里到外由内容区、填充区、边框区、外边距组成 -->
     <div>qcby</div>
</html>

div{
   
}
selector{
    property:value;
    property:value;
}
/*选择器分类
    一、基本选择器
    二、伪元素选择器
    三、伪类选择器
*/

/*一、基本选择器*/
/* 1>元素选择器  E{} 用元素名称（包含body、html）做选择器
    特例：选择所有，给整个页面加上样式
    *{

    }
*/
div{
    
}
p{

}
span{

}
/* 2>属性选择器* E[]{}
    div[id] 有id属性的div元素
    div[id=xx] 有id属性且id属性值为xx的div元素
    div[id^=xx] 有id属性且id属性值开头为xx的div元素
    div[id$=xx] 有id属性且id属性值结尾为xx的div元素
    div[id*=xx]有 id属性且id属性值包含xx的div元素
    甚至可以自己创造属性

    
*/
div[id]
{
    color:pink;
    background:yellow;
}

div[aaa=xx]
{
    color:pink;
    background:yellow;
}
/* 3>id选择器*/
#xx{
    color:pink;
    background:yellow;
}
/*4>class选择器*/
.xx{
    color:pink;
    background:yellow;
}
/*特例.结合选择器 比如选择class为xx的h4*/
h4.xx{
    color:pink;
    background:yellow;
}
/*5>包含选择器 selector1 selector2.....是弱包含关系，不一定是父子，有可能是子孙
    如  <p>admin</p>
        <div>
            <p>admin</p>
        </div>
        不一定是元素选择器，其他也行
*/
div p{
    color:pink;
    background:yellow;
}
/*6>子选择器 selector1>selector2.....强包含关系，必须是父子
/*7>兄弟选择器 selector1~selector2.....  匹配1元素后面符合2元素的兄弟
                selector1~*..... 匹配1元素所有兄弟
*/

/*8>选择器组合 selector1，selector2，selector3...*/
div,p,h4{
    color:pink;
    background:yellow;
}






/*二、伪元素选择器*/
/*1>首字符伪元素选择器
   使用的前提是块级元素
     <div class="gs">qcby</div>
     q改变颜色
*/

.gs::first-letter
{
    color:pink;
    background:yellow;
}

/*2>首行伪元素选择器
     使用的前提是块级元素
     <div class="gs">qcby<br>byqc</div>
    qcby改变颜色
*/
.gs::first-line
{
    color:pink;
    background:yellow;
}
/*3>前插伪元素选择器
    <div class="gs">qcby</div>
    在里面加content：“666”
*/
.gs::before
{
    content: "666";/*也可以前插图片*/
    color:pink;
    background:yellow;
}

/*三、伪类选择器*/
/*1.结构性伪类选择器
    ：ntn-child（）
     <ul>
        <li>qcby01</li>
        <li>qcby02</li>
        <li>qcby03</li>
        <li>qcby04</li>
        <li>qcby05</li>
        <li>qcby06</li>
     </ul>
    如下 则03个改变颜色，这几个得是兄弟元素
    括号里甚至可以写 2n+3 -n+3（前三个）
*/

ul li:nth-child(3)
{
    color:pink;
    background:yellow;
}

div{
display:inline;/*内联级元素*/
background: pink;
color: blue;
width:200px;
height:100px;

}
.child
{
    background: pink;
    color: blue;
    width:200px;
    height:100px;

}
.father{
    display:flex;
    background: pink;
    color: blue;
    width:200px;
    height:100px;
}


 /*填充区padding*/
div{
    background: pink;
    color: blue;
    width:200px;
    height:100px;
    padding:40px 50px;
    
    /*前设置上下 后设置左右*/
    /*padding: 40 50 60 70 从上顺时针分别上右下左*/
    /*
    也可以单独设置
    padding-left: ;
    padding-top: ;
    padding-bottom: ;
    padding-right: ;
    */

div{
        background: pink;
        color: blue;
        border-bottom:dashed black 10px;/*dashed 虚线*/
        border-top:solid black 10px;
        width:200px;
        height:100px;
}
    /*
    边框区：border是复合属性
    由三方面组成：
    边框样式：border-style
    边框颜色：border-color
    边框宽度：border-width
    简化无顺序要求；border:solid black 10px;
    边框也有方向 top bottom right left
    四个方向，三方面可结合，12种情况；
    */
    div{
        background: pink;
        color: blue;
        width:200px;
        height:100px;
        margin: 40px;
    }
    /*margin外边距设置元素和元素之间的距离，用三个div进行演示 设置宽度和margin类似
     margin:auto;可以自动设置让元素左右居中；
    
    */
    /*内容区：width宽 height高
    box-sizing：border-box；以边框为盒子边界
    box-sizing：content-box；默认width height针对内容区
    */
    .a{
    background: pink;
    color: blue;
    width:200px;
    height:100px;
    border:10px black solid; 
    box-sizing:border-box;/*包含边框区在内的的width height*/
}
.b{
    background: pink;
    color: blue;
    width:200px;
    height:100px;
    border:10px black solid;
    box-sizing:content-box;/*仅是内容区的width height*/
}

/*横向布局2个*/

.father
{
    background: pink;
    width:800px;
    overflow: hidden;/*父亲随着子集最高的变化*/
}
.left
{
    background: purple;
    width: 300px;
    height: 200px;
    float:left;
}
.right
{
    background: green;
    width: 300px;
    height: 500px;
    float:left;
}
.bottom
{
    background: yellow;
    width: 800px;
    height: 200px;
}
/*
1.float布局 
需要向横向布局的元素添加float元素，left（左浮动）、right（右浮动）
浮动起来之后父级消失了，因为父级没设置高度，
给父级设置高度后也有缺点父级高度需要自己计算，因此给父级加overflow：hidden；让父级元素的高度等于子集最高的
但是无法实现均分
2.内联块级元素布局
横向布局的元素添加display:inline-block
子元素之间由于html书写中换行造成空格且无法实现均分
空格的问题可以回html中让子元素首位衔接，也可以把父级元素设置font-size=0，子元素font-size大小不为0
3.***弹性盒子模型（重点）
将父元素设置成弹性盒子模型,则子元素自动横向排列
配套属性
1>子元素的排列方向
flex-direction：row横着
flex-direction：column竖着
flex-direction:row-reverse;  将子元素的的排列方向反转；
flex-direction:column-reverse;  将子元素竖向排列且排列方向反转
2>设置弹性盒子内元素是否换行
flex-wrap:wrap;换行展示
flex-wrap:nowrap;不换行展示
3>设置子元素的排列顺序
order  值是数字，值越小越靠前
4>控制弹性盒子内子元素的缩放比例[复合属性]
flex-grow：拉伸因子；  总800    150+100+200  多出350     将left middle right的拉伸因子都设为1，将多出的
空间分为三份，每份分给三个子元素
flex-shrink：压缩因子；总1500   600+400+500  超出700px   将left的压缩因子设为5 middle right设为1，意思是
left的宽度减去超出的5/7 middle、right分别减去1/7； 
如果有一个元素不想参与这个过程，那么将其设为0就好了.
因此可以通过三个子元素宽度相同且总宽度小于父元素时的拉伸因子都设为1；或者宽度相同且总宽度大于父元素时的压缩因子
都设为1；
flex-basis基准因子；一般直接用宽度代替了
5>控制子元素的分布方式
justify-content: flex-start;默认放在左边
justify-content: flex-end;默认放在右边
justify-content: center;默认放在中间
justify-content: space-between;空白放在元素之间
justify-content: space-around;空白放在元素周围
justify-content: space-evenly;空白在边边和之间均匀分布
6>设置垂直方向的对齐方式
align-items:flex-start;默认放在顶端
align-items:flex-end;默认放在底端
align-items:center;默认居中对齐
align-items:baseline;按照子元素内的文字（可让子元素内的字体大小设置不同进行演示）让首行文字底端对齐
7>设置多行元素分布方式
align-content: flex-start;默认放在顶端
align-content: flex-end;默认放在底端
align-content: center;默认居中对齐
align-content: space-between;空白放在行之间
align-content: space-around;空白放在行周围
align-content: space-evenly;空白均匀分布

}

*/


/*横向布局3个*/
.father
{
    background: pink;
    width:1000px;
    overflow: hidden;/*父亲随着子集最高的变化*/
}
.left
{
    background: purple;
    width: 500px;
    height: 200px;
    float:left;
}
.middle
{
    background: blue;
    width: 300px;
    height: 200px;
    float:left;
}
.right
{
    background: green;
    width: 300px;
    height: 500px;
    float:left;
}
.bottom
{
    background: yellow;
    width: 800px;
    height: 200px;
}


}