html从零开始6：关系选择器、css盒子模型、弹性盒子模型【搬代码】

搬代码

于 2024-02-15 14:01:56 发布

阅读量1k

点赞数 10

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_52001174/article/details/136108311

版权

关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /*

        
        关系选择器


        */
        /*
        后代选择器
        定义：
        选择所有北E元素包含的元素，中间用空格隔开
        语法：
        E F{}
        */
        ul li{
            color: blue;
        }
        /*
        子代选择器(只有儿子生效)
        定义：
        选择所有作为E元素的直接元素F，对更深一层的元素不起作用，用>表示
        语法：
        E>F{}
        */
        div>a{
            color: red;
        }
        /*
        相邻兄弟选择器
        定义：
        选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
        语法：
        E+F{}
        */
        h1+p{
            color: blueviolet;
        }
        /*
        通用兄弟选择器
        定义：选择E元素之后所有的兄弟元素，作用与多个元素，用~隔开，只能选择向下
        语法：
        E~F{}
        */
        h2~p{
            color: blanchedalmond;
        }
    </style>
</head>
<body>
<!--后代选择器-->
    <ul>
        <li>li元素</li>
        <li>li元素</li>
        <li>li元素</li>
        <ol>
            <li>li元素</li>
        </ol>
    </ul>
<!--子代选择器(只有儿子生效)-->
<div>
    <a href="#">a子元素1</a>
    <p><a href="#">p中a孙元素</a></p>
    <a href="#">a子元素2</a>
</div>
<!--相邻兄弟选择器-->
<h1>h1元素</h1>
<p>p元素</p>
<p>p元素2</p>
<!--通用兄弟选择器-->
<h2>h2元素</h2>
<p>p元素</p>
<p>p元素</p>
<a href="#">a元素</a>
<p>p元素</p>
</body>
</html>

css盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /*
        css盒子模型

        所有的html元素可以看作盒子，在css中，boxmodel这一术语是用来设计和布局时使用css
        盒子模型本质上是一个盒子，封装周围的html元素，它包括：
        外边距（margin），边框（border），内边距（padding），和实际内容（content）

        Margin（外边距）-清除外边框的区域，外边框是透明的
        Border（边框）-围绕在内边距和内容外的边框
        Padding（内边距）-清除内容周围的区域，内边距是透明的
        Content（内容）-盒子的内容，属于文本和图像
        */
        #div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 50px 10px;
            border: 5px solid blue;
            margin: 50px 10px;
        }
        /*可以分开上下左右设置*/
        #div2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding-left: 50px;
            padding-right: 100px;
            padding-top: 150px;
            padding-bottom: 40px;
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px;
        }
    </style>
</head>
<body>
    <div id="div1">我是内容div1</div>
    <p>我是p标签</p>
    <div id="div2">我是内容div2</div>
    
</body>
</html>

弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /*
        弹性盒子定义
        弹性盒子是css3的一种新的布局模式
        css3他逆行盒是一种当页面需要适应不同的屏幕大小以及设备的确保元素拥有适当的行为布局方式
        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的元素进行排列，对齐和分配空白空间

        css3弹性盒内容
        弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成
        弹性容器通过设置display属性的值为flex将其定义为弹性容器
        弹性容器内包含了一个或多个弹性资源
        温馨提示
        弹性容器外及弹性子元素内是正常渲染的。他逆行盒子只定义了弹性子元素如何在弹性容器内布局

        <div class="fLEX-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
        </div>
.flex-container{
            display: flex;
            width: 400px;
            height: 250px;
            background-color: aqua;
        }

        flex-direction属性
        定义
        flex-direction属性制定了他逆行子元素在父容器中的位置
        语法
        flex-direction:row | row-reverse | column | column-reverse
        row:横向从左到右排列（左对齐），默认的排列方法
        row-reverse:饭庄横向排列（右对齐，从后往前排，最后一项排在最前面）
        column：纵向排列
        column-reverse: 反转纵向排列，从后往前排，最后一项排在最上面

        justify-content属性
        定义
        内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的株洲县（main axis）对齐
        语法
        justify-content：flex-start | flex-end | center
        flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距变现被放置在改行的main-start边线，而后续弹性项一次平齐摆放
        flex-end弹性项目向行尾紧挨着填充。第一个弹性项的mian-end外边距线被放置该行的main-end边线，而后续弹性项一次平齐摆放
        conter弹性项目剧中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
        */
        
        .flex-container{
            display: flex;/*加上后垂直的编程水平的*/
            width: 500px;
            height: 500px;
            background-color: aqua;
            flex-direction: row-reverse;
            justify-content: center;
            align-items: flex-end;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
            flex: 1;/*flex-grow: 1;*/
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            flex: 2;flex-grow: 2;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: gold;
            flex: 2;/*flex-grow: 2;*/
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="box1">flex item 1</div>
        <div class="box2">flex item 2</div>
        <div class="box3">flex item 3</div>
    </div>

</body>
</html>