html的元素、元素属性、css

最新推荐文章于 2024-05-31 10:24:04 发布

m0_64683726

最新推荐文章于 2024-05-31 10:24:04 发布

阅读量235

点赞数

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

本文链接：https://blog.csdn.net/m0_64683726/article/details/121705167

版权

ht 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一html的元素：

一.1 元素包含了元素块元素和行内元元素

行内元素包含了<span > <a > <img> <input> < b > < i> <strong> 专门针对文字图片等的元素

特点：内容大小决定了元素的大小，在同一行显示，如果行宽不够，会向下扩宽；且他的宽高是不能设置宽高的

注意不能把块级元行内元素中素放入到

一。2块级元素：

块级元素包含了 p div h1-h5 的元素等

行内元素的特点：内容大小取决于他的大小，在一行内显示，可以设置宽高，同时可以独占一行

注意：精良不要往p标签或者行内其他元素中添加块级元素

一。3行内块元素；

他包含了行内元素和块元素的特点；

内容大小取决于它的大小

在一行内并排显示

可以设置宽和高

二。字体：

字体属性，

包含了字体颜色： color ，字体颜色：可以用三种方法调试：分别是：rgb(调色板) 颜色的权重（red green bule black write） #ffff（就是16进制调色板）

文体：font-family包含宋体、楷体、华云、黑体、Ramanti

文字粗细：font-weight boder：文字加粗,也可以用 intalic 属性值范围是 100-900之间

符合属性：字体、文字大大小、文字的斜体、先后顺先是：文字大小、文字加粗、文字斜体（正），文字文体

三、盒子模型

盒子模型就是

盒子模型包含了contain 、padding 、border、margin四个部分

contain的内容了：就是输入的文本的内容

内边距：就是contain到边框大的位置，中间的部分‘

boder；边框包含了实线和虚线边框属性，颜色线条粗细

复合性的边框：color 20px solid

内边距：就是padding的边框

包含了：padding-top 顶部边框 padding right 有边框 padding-left 左边 padding-bottom下边框

外边距： margin-top上外边距 margin -right 右外边距 margin-bottom下外边距 margin-left是左外边距

t盒子模型的特点：当写四个属性时，表示顺时针的上、右、下、z左

当下三个属性时，中间属性标识，左右。

当写两个时，第一个标识，上下，第二个标识左右。

元素的属性：居中margin 权重用auto居中即可。

是咧

<!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>Document</title>
    <style>
        #box {
            margin: 0 auto;
            height: 800px;
            width: 600px;
            text-align: center
        }
        
        #over {
            height: 200px;
            width: 600px;
            background-color: green;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        
        #throught {
            height: 400px;
            width: 600px;
            background-color: rgb(247, 20, 160);
            margin: 0 auto;
            margin-bottom: 10px;
        }
        
        #dibu {
            height: 200px;
            width: 600px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div id="box">
        <div id="over">上部</div>
        <div id="throught">中部</div>
        <div id="dibu">底部</div>
    </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>Document</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }
        p {
            width: 200px;
            background-color: red;
            /* padding-left:10px;
            padding-top: 12px;
            padding-right:15px;
            padding-bottom: 20px; */
            /* 上右下左 */
            padding: 10px;
            
            border:solid  red  10px;
            /* margin-bottom: 20px; */
            margin-left: 10px;
        }

        div {
            /* width: 300px;
            height: 100px;
            background-color: #ccc;
            margin-top: 25px; */
        }

        .one{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* padding-top:50px ; */
            /* overflow: hidden; */
            border:1px solid black;


        }

        .two {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid black;
        }
    </style>
</head>

<body>
    <!-- 盒子模型 -->
    <!-- content -->

    <p>这是我们的p标签</p>

    <div>这是我们的div</div>
    <!-- padding -->
    <!-- 内边距的值 会把我们的元素撑大 -->
    <!-- 复合型写法 -->
    <!-- 
      1.  如果复合型写法的值是四个 那么顺序为
        上 右  下 左   顺时针方向赋值 
    
        2.如果复合型写法的值是三个   那么顺序为
          上   左右   下  方向赋值 
        3.如果复合型写法的值是两个   那么顺序为
          上下   左右  方向赋值 
        4.如果复合型写法的值是一个   那么这个值
          就是四个方向内边距的值
    -->

    <!-- border -->
    <!-- 复合型写法 
    border: 1px solid black;  
    第一个值是我们的 边框宽度  
    第二个值是我们的 边框样式 实线 虚线 点线  双实线等等
    第三个只是我们的 边框颜色

    这三个值没有必须的顺序
    -->

    <!-- margin -->
    <!-- 复合型写法 
    margin的复合型写法  同上， 和内边距一样
    -->

    <!-- 外边距合并问题
        两个相邻元素设置外边距，不会相加，会以较大一方
        的外边距作为他们之间的边距
        因此，我们只用设置其中一个的外边距
    -->

    <!-- 嵌套盒子的垂直外边距塌陷问题 
    1.给父元素添加上内边距
    2.给父元素添加 overflow-hidden
    3.给父元素添加上上边框
    -->


    <div class="one">
        
        <div class="two">这是子元素盒子</div>
    </div>

    <!-- 块级元素水平居中 -->
    <!-- 
        1.盒子必须指定了宽度
        2.盒子左右边距设置为auto
        margin:0 auto;
     -->


</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>Document</title>
    <link rel="stylesheet" href="./浮动相册.css">
</head>

<body>
    <div class="mian">
        <div class="show_fen1">
            <ul id="ul1">
                <li>艺术摄影</li>
                <li>婚纱摄影</li>
                <li>纪实摄影</li>
                <li>儿童摄影</li>
                <li>风景摄影</li>
                <li>创意摄影</li>
            </ul>
        </div>
        <div class="show-fen2">
            <li>
                <a href="#"> <img src="images/objpic01.jpg" alt=""></a>
                <span>艺术摄影</span>
            </li>
            <li>
                <a href="#"><img src="images/objpic02.jpg" alt=""></a>
                <span>艺术摄影</span> </li>
            <li>
                <a href="#"> <img src="images/objpic03.jpg" alt=""></a>
                <span>艺术摄影</span> </li>

            <li>
                <a href="#"><img src="images/objpic04.jpg" alt=""></a>
                <span>艺术摄影</span></li>
            <li>
                <a href="#"><img src="images/objpic05.jpg" alt=""></a>
                <span>艺术摄影</span></li>
            <li>
                <a href="#"><img src="images/objpic06.jpg" alt=""></a>
                <span>艺术摄影</span></li>
            <li>
                <a href="#"><img src="images/objpic07.jpg" alt=""></a>
                <span>艺术摄影</span></li>
            <li>
                <a href="#"><img src="images/objpic08.jpg" alt=""></a>
                <span>艺术摄影</span></li>
            <li>
                <a href="#"><img src="images/objpic09.jpg" alt=""></a>
                <span>艺术摄影</span></li>
        </div>
    </div>
</body>

</html>

m0_64683726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的元素、元素属性、css

一html的元素：一.1 元素包含了元素块元素和行内元元素行内元素包含了<span> <a > <img> <input> < b > < i> <strong> 专门针对文字图片等的元素特点：内容大小决定了元素的大小，在同一行显示，如果行宽不够，会向下扩宽；且他的宽高是不能设置宽高的注意不能把块级元行内元素中素放入到一。2块级元素：块级元素包含了 p div...
复制链接

扫一扫