2021/3/16--前端学习第8天笔记--制作形状、标准文档流、块、行内、行内块元素

最新推荐文章于 2022-05-11 11:10:16 发布

张登辉的奇妙旅程

最新推荐文章于 2022-05-11 11:10:16 发布

阅读量177

点赞数 1

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

本文链接：https://blog.csdn.net/A444477/article/details/114867130

版权

前端同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

html5

15 篇文章 0 订阅

订阅专栏

2021/3/16–前端学习第8天笔记

制作各类形状：
利用border：
单双三四、独立值法设置
百分比是父元素的宽度乘上百分比

.box {
            /* width: 200px;
            height: 200px; */
            width: 0px;
            height: 0px;
            margin: 100px;
            /* transparent   透明颜色 */
            border:100px solid transparent;
            border-radius: 280px;

            border-top-color: skyblue;
            /* border-right-color: blue; 
            border-bottom-color: gold;
            border-left-color: purple; */
            
        }

padding：
设置方法同margin
百分比为父元素宽度乘以百分比

.container {
            width: 800px;
            height: 800px;
            border: 1px solid orange;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 100px;
            /* 内边距 */
            /* 单值法 */
            /* padding: 100px; */
            /* 双值法 */
            /* padding: 100px 50px; */
            /* 三值法 上100  左右50   下20*/
            /* padding: 100px 50px 20px; */
            /* 四值法 */
            /* padding: 50px 70px 90px 30px; */
            /* 等价写法，单独设置 */
            padding-top: 100px;
            padding-right: 50px;
            padding-bottom: 30px;
            padding-left: 50px;
        }   

        .ickt {
            width: 1000px;
            height: 500px;
            border: 10px solid pink;
            padding: 100px;
        }

        .demo {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 二值法 */
            /* 父元素宽度 1000px的 百分比*/
            margin: 10% 20%;
            padding: 10% 20%;
            /* 使用百分比相对于父元素的宽度 */
        }
        </style>
    <title>Document</title>
</head>
<body>
    <!-- 百分比设置内边距 -->
    <div class="ickt">
        <div class="demo"></div>
    </div>
    <!-- 内边距 -->
    <div class="container">
        <div class="box"></div>
    </div>

标准文档流：
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

就和word一样，必须在光标处输入。当前面图片、文字变大，光标会移动。
从左到右、从上到下。

标准文档流的特征：

标准文档流标签分类：块级和行内级
块级：所有容器级、P标签。
行内级：除了p标签之外的所有文本级的标签都是行内元素。

html中标签分类：容器级、文本级

<style>
        span {
            font-size: 100px;
        }
        
        h1 {
            width: 600px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <!-- 1 空白折叠 -->
    <!-- 2 baseline基线对齐 -->
    <!-- 3 超过盒子宽度会自动换行 -->
    <h1>hello     yyy   <span>ickt   tttt</span>!ggg</h1>

display属性（显示模式）可以将块状级、行内级、行内块级元素相互转换。
块级元素：
可以设置宽高、默认独占一行
不设置宽度，撑满父级
目前学过的块级元素：div h1-h6 p等
非块级元素，设置display：block变为块级元素

<style>
        span {
            font-size: 100px;
        }
        
        h1 {
            width: 600px;
        }

        /* 块级元素 */
        .container {
            height: 800px;
            width: 1000px;
            background: pink;
        }

        .box1 {
            height: 100px;
            background: green;
        }

        .box2 {
            height: 100px;
            background:orange ;
        }
    </style>
    <title>Document</title>
</head>
<body>
	<!-- 标准文档流的特点 -->
    <!-- 1 空白折叠 -->
    <!-- 2 baseline基线对齐 -->
    <!-- 3 超过盒子宽度会自动换行 -->
    <h1>hello     yyy   <span>ickt   tttt</span>!ggg</h1>   

    <!-- 块级元素 -->
    <div class="container">
        <div class="box1"></div>
        <!-- 就算不占满100%，也会自动换行 -->
        <span>文本级</span><span>文本级</span>
        <div class="box2"></div>
    </div>

行内元素：
不能设置宽高，与其他行内级元素，在同一行内从左到右依次排列。
行内元素设置的margin、padding上下不生效（不占位置，但是背景色能够实现），左右生效。
非行内级设置display：inline变行内元素
目前学过的行内元素：span 、a 、 time、label、strong等

<style>
        .container {
            width: 800px;
            height: 800px;
            background: pink;
        }

        .text1 {
            background: gold;
            margin: 50px;
            padding: 50px;
        }

        .text2 {
            background: green;
            /* 宽高没用 */
            /* width: 100px;
            height: 100px; */
            margin: 50px;
            padding: 50px;
        }

        .text3 {
            background: skyblue;
        }

        .box {
            height: 100px;
            background: yellowgreen;
            margin-left: 100px;
            display: inline;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <span class="text1">text 1-1-1</span>
        <span class="text2">text 2-2-2</span>
        <span class="text3">text 3-3-3</span>

        <div class="box">box</div>
    </div>
</body>

行内块元素：
可以设置宽高、与其他行内级元素从左到右依次排列
大小默认包裹内容，设置宽高后为设置大小
非行内块元素，可以设置display：inline-block
目前学过的行内块元素：img、textarea 、input
行内块元素设置的margin、padding全都生效，会占空间。

<style>
        /* img、textarea、input都是行内块元素 */
        .container {
            width: 800px;
            height: 800px;
            background: pink;
        }

        img {
            height: 200px;
        }
        textarea {
            height: 200px;
        }
        /* 将span转换为行内块元素 */
        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: green;
        }

        div {
            display: inline-block;
            width: 20px;
            height: 50px;
            background-color: yellowgreen;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img src="../../pic/test.jpg" alt="">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input type="text">
        <span>hello</span>
        <div></div>
    </div>
</body>