2.15html学习总结

最新推荐文章于 2024-08-10 22:11:57 发布

602源

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量82

点赞数

文章标签： html 学习 css

本文链接：https://blog.csdn.net/m0_57282850/article/details/129049338

版权

1.多行省略

      .one {
             /* 多行省略 */
            /* 设置弹性盒子这样盒子可不设置高 */
            display: -webkit-box;
            /* 设置几行显示 */
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 伸缩盒的子元素排列方式 */
            -webkit-box-orient: vertical;
}

2.盒子模型

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

常用语法如下：

<!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>
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-color: aqua;
            /* 边框样式solid是实线，dashed是虚线，dotted点虚线 double表示双线*/
            border-style: solid;
            /* 边框的复合写法 注意没有先后顺序*/
            border: 1px solid red;
            border-top: 1px solid blue;
            /* 合并相邻边框 */
            border-collapse: collapse;
            /* 边框会影响实际盒子的大小 测量时不应该测量边框*/

            /* 内边距的复合写法 */
            /* padding: 5px;代表上下左右 */
            /* padding: 5px 10px;代表上下5，左右10 */
            /* padding: 5px 10px 15px;代表上5，左右10，下15 */
            /* padding: 5px 10px 15px 20px;代表上右下左 */
        }
        /* padding值不会撑开盒子的情况 不设置宽属性即可*/
        div {
            /* 有width属性无论多宽padding值都会起效果 */
            width: 100%;
            height: 200px;
            background-color: red;
        }
        /* 块级盒子水平居中条件是左右margin左右为auto前提必须有宽度 */
        .one {
            margin: 0 auto;
            width: 900px;
            height: 200px;
            background-color: pink;
        }
        /* 行内块和行内元素设置居中要给他们的父盒子加上text-align：center；即可 */
        /* 嵌套 当父盒子有上边距，子盒子也有上边距的话会有塌陷问题
        解决方法1.给父盒子加上border 
               2.给父盒子加上padding
               3.给父盒子添加overfloat：hidden*/
        .two {
            border: 1px solid transparent;
            padding: 1px;
            overflow: hidden;
        }
        /* 清除网页元素的内外边距也是css的第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 行内元素例如span只设置左右的边距，设置上下边距也不会起效果 */
        /* 边框盒 box-sizing*/
        * {
            /* 高度和宽度应用于元素的所有部分: 内容、内边距和边框: */
            box-sizing: border-box;
            /* 高度和宽度只应用于元素的内容: */
            box-sizing: content-box;
        }
       
    </style>
</head>
<body>
    <!-- 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器，css盒子
    模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边距、内边距和实际内容 -->
        <div></div>
        <div class="one"></div>
        <div class="two">
            <div></div>
        </div>
        <div class="text">到前己年何，得小老。</div>
</body>
</html>

3.圆角边框

<!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>
        /* 圆形 */
        .cri1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border-radius: 50px;
        }
        /* 圆角矩形 */
        .cri2 {
            width: 100px;
            height: 50px;
            background-color: aqua;
            border-radius: 25px;
        }
        /* 四分之一圆形 上半圆*/
        .cri3 {
            width: 100px;
            height: 100px;
            background-color: black;
            border-radius: 100px 0 0 0;
        }
        /* 上半圆 */
        .cri4 {
            width: 100px;
            height: 50px;
            background-color: blue;
            border-radius: 50px 50px 0 0;
        }
        /* 下半圆 */
        .cri5 {
            width: 100px;
            height: 50px;
            background-color: black;
            border-radius: 0 0 50px 50px;
        }
    </style>
</head>
<body>
    <div class="cri1"></div>
    <div class="cri2"></div>
    <div class="cri3"></div>
    <div class="cri4"></div>
    <div class="cri5"></div>
</body>
</html>

602源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.15html学习总结

css
复制链接

扫一扫