htmlbolg_3

最新推荐文章于 2023-07-12 10:43:27 发布
最新推荐文章于 2023-07-12 10:43:27 发布
阅读量182 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_nevermore/article/details/128351548
版权

46-71 78-83

CSS选择器

1、标签选择器(TAG选择器）

css：div{}  html：


使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如层次选择器

2、群组选择器（分组选择器）

css：div , p , span{}

div , #text , .title{background:red;    }

通过逗号的方式，给多个不同的选择器添加CSS样式，来达到代码的复用

3、通配选择器(给所有标签添加样式）

*{ } -> div , ul , li , p , h1 , h2 …{ }
使用场景：去掉所有标签的默认样式时可以使用。

4、层次选择器

后代：M N
父子：M > N
兄弟：M ~ N（当前M下面所有的兄弟N标签）
相邻：M + N（当前M相邻下面的N标签）

例： 后代

后代（ul下面的li都要）
 <style>    
    ul li{ border:1px solid; }
    </style>
<body>
        
    <ul>
        <li>

        <ul>
            <li>

            </li>
        </ul>
        </li>
    </ul>
</body>

在这里插入图片描述

例：父子

只关心一个后代，后代的后代不关心
在这里插入图片描述


#list > li{ border:1px solid; }

兄弟

div~h2 {background：red；}  （当前div下的h2   在div上面的不行）

在这里插入图片描述

相邻

在这里插入图片描述
在这里插入图片描述

div+h2 {background：red；}

5、属性选择器

在这里插入图片描述

<style>
        div[class*=box]{ background:red;}     加*号可以使带有box的都能被选中
    </style>
</head>
<body>
    <div>111</div>
    <div class="box">222</div>
    <div class="box-buttom">233</div>
    <div class="search">333</div>
</body>

在这里插入图片描述

div[class][id]{ background:red;}  组合的方式

在这里插入图片描述

6、伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

1.M ：伪类{} hover等

:link     访问前的样式（只能添加给a标签）
:visited  访问后的样式（只能添加给a标签））
:hover   鼠标移入时的样式（可以添加给所有标签）
:active   鼠标按下时的样式
注：
 1.link visited只能给a标签加，hover和active可以给所有的标签加。
 2.如果四个伪类都生效，一定要注意顺序:L V H A。
 3.一般网站只这样去设置:a{}:hover{}。
 eg1：鼠标

    <style>
        div{height: 200px;width: 200px;background: red;}    
        div:hover{background:blue}     移入
        div:active{background:green}    按下
    </style>

eg2：访问

<style>
    a:link{ color:red ;}
    a:visited{ color:blue ;}
    a:hover{ color:green ;}
    a:active{ color: yellow;}
</style>
</head>
<body>
    <a href="#">一个连接</a>
</body>

注：一般网站都只设置
a{}  ( link visited active )  a:hover{}

2.after等伪类

:after、:before  通过伪类方式给元素添加一段文本内容，使用content属性

   <style>
   div:before{content:"world";color:red;}
    </style>
</head>
<body>
    <div>hello</div>
</body>

在这里插入图片描述
:checked、:disable、:focus  都是针对表单元素的

    <style>   
        :disable{width:100px;height:100px;}     不选择时呈现的样子
        :focus{ background:red}     选中后表单的颜色
        </style> 
    </head>
    <body>  
        <input type="checkbox">
        <input type="checkbox" checked>     默认选中状态
        <input type="checkbox">
        <input type="text">
    </body>

在这里插入图片描述

3.结构性伪类选择器

:nth-of-type()、:nth-child()
（角标从1开始，1表示第一项；n值 表示从0开始到无穷）
:first-of-type、:first-child （第一行）
:last-of-type、 :last-child （最后一行）
:only-of-type、:only-child （只有一个）（唯一一个）

type：类型
 child：孩子

    <style>
        li:nth-of-type(3){background:red;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
    </body>
    </html>

在这里插入图片描述

 li:nth-of-type(3){background:red;}   代表隔行换色

注：
type只会在

  • 中选择某一个。
    child会在全部里选某一个，但是
    不会有效果。

  • CSS样式的继承

    文字相关的样式可以被继承（颜色，字形，大小等）
    布局相关的样式不能被继承（边框，宽高等）（默认不能继承，但可以设置继承属性 inherit值）

    div{ width:300px; height: 300px; border:1px red solid; color:red; font-size:30pX;}
p{ border:inherit;}

    CSS优先级

    1.样式优先级

    相同样式优先级
      当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

          <style>
    div{ color: red;}
    div{ color:blue; }
    </style>
</head>
<body>
      <div>
        aaaaaaa
      </div>

    在这里插入图片描述

    内部样式与外部样式
      内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
      在这里插入图片描述
    最后的结果由后写入的决定

    单一样式优先级
    style行间 > id > class > tag > * > 继承
    例：（#elem > .box > div > * > 继承）
    style行间  权重 1000
    id      权重 100
    class   权重10
    tag      权重 1

    2.!important优先级

    !important
    提升样式优先级，非常规写法，不建议使用。
    不能针对继承的进行优先级提升
    标签+类与单类
    标签+类 > 单类

    div.box{color:blue;}

    群组优先类
    群组选择器与单一选择器的优先级相同，靠后写的优先级高

    div,p{color:blue} 
div{color：red}

    3.层次优先级（建议三层以内）

    1.权重比较
    ul li .box p input{}（1+1+10+1+1）（数字为等级，不能越级）
    .hello span #elem{}（10+1+100）

    2.约分比较
    ul li .box p input{}
    .hello span #elem{}
    （同种类型相约分，如.box和.hello约掉）

    CSS盒子模型（类比成快递）

    组成 ：content -> padding -> border -> margin
    类比成 物品  填充物  包装  盒子与盒子之间距离
    content ：内容区域 width和height组成的
    padding ：内边距（内填充）
      只写一个值 ：30px
      写两个值：30px 40px（上下、左右）
      写四个值：30px 40px 50px 60px（上、右、下、左）

    单一样式只能写一个值
      padding-left
      padding-right
      padding-top
      padding-bottom

    margin ：外边距（外填充）
      只写一个值 ：30px
      写两个值：30px 40px（上下、左右）
      写四个值：30px 40px 50px 60px（上、右、下、左）

    单一样式只能写一个值
      padding-left
      padding-right
      padding-top
      padding-bottom
    注：
    1.背景颜色会填充到margin以内的区域。
    2.文字会在content区域。
    3. padding不能出现负值，margin是可以出现负值。
    在这里插入图片描述

    style>
    #box{
        width:200px; height:200px; background:red; border:10px /* transparent solid */;
        padding : 30px 50px;      
        margin: 10px;
        }
     #box2{ width:200px; height :200px; background:black; color:white;}
</style>
    </head>
    <body>
        <div id="box1">这是一个盒子</div>
        <div id="box2">这是另一个盒子</div>
    </body>
    </html>

    1、box-sizing

    盒尺寸，可以改变盒子模型的展示形态。
    默认值：content-box ：width、 height -> content
    border-box : width、 height -> content padding border （宽高分配给三个类型）

        <style>
    #box{
        width:200px; height:200px; background:red; border:10px blue solid;
        padding : 30px 50px;
        box-sizing: border-box;     不用再去计算尺寸大小
    }
    input{ width:100%; padding: 30px;box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box1">这是一个盒子</div>
    <input type="text">
</body>
</html>

    在这里插入图片描述

    使用的场景：
      1.不用再去计算一些值
      2.解决一些百分比的问题

    2、盒子模型的一些问题

    1.maegin叠加

    当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
    1.margin叠加间题,出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
    eg：

        <style>
    #box1{width:200px; height:200px; background:red;margin-bottom: 30px;}
    #box2{width:200px; height:200px; background:blue;margin-top: 30px;}
    </style>    上下边距不会进行累加，而是叠加，谁大用谁的值
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
</body>
</html>

    在这里插入图片描述
    30px而不是60px，因为叠加了，按照谁的值大按谁来
    解决方案:
      1.BFC规范
      2.想办法只给一个元素添加间距。

    2.maegin传递

    margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

    <style>
#box1{width:20opx; height: 200px; background :red; }
#box2{ width:10opx; height:100px; background:口blue; margin-top:100px;}
</style>

    在这里插入图片描述

    解决方案:
      1.BFC规范
      2.给父容器加边框。
      3.margin换成padding。

    3.margin扩展

    1.margin自适应：
      margin左右自适应是可以的，上下自适应则不行。
    2.不设置content现象：
      width、height不设置的情况下，对盒子模型的影响，会自动去计算容器的大小，省去部分代码。
    在这里插入图片描述
    左边全部自适应：
    在这里插入图片描述
    在这里插入图片描述

    左右两边全都自适应：
    在这里插入图片描述
    不设置content现象（节约资源）：
    1.设置时：
    在这里插入图片描述
    2.不设置时（自动沿着父容器充满）：
    在这里插入图片描述

    盒子嵌套练习

    在这里插入图片描述

    <style>
    #box1{width:350px; height:350px; border:1px black dashed;padding:27px;}
    #box2{border: 5px #d7effe solid;padding:20px;}
    #box3{background: #ffa0df;padding:40px;}
    #box4{border: 1px white dashed;padding:3px;}
    #box5{border: 1px white dashed;padding:49px;}
    #box6{width:100px; height:100px; background:#96ff38;border:#fcff00 5px solid;}
    </style>                             
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

    标签分类

    1、按类型

    block ：div、p、ul、li、h1 …
      1、一个块独占一行
      2、支持所有样式
      3、不写宽的时候，跟父元素的宽一样
      4、所占区域是一个矩形

    inline ：span、a、em、strong、img …
      1、挨在一起的（不独占一行）
      2、有些样式不支持，例如：width、height、marign、padding
      3、不写宽的时候，宽由内容决定
      4、所占的区域不一定是矩形
      5、内联标签之间有空隙，是换行原因引起的（可以将font-size:0放在body里来解决，后面样式再添加回字原来的大小font-size:xxx）（通过优先级来处理）

    inline-block ：input、select …
      1、挨在一起，且支持宽高

    注：布局一般用块标签，修饰文本一般用内联标签

    2、按内容

    Flcw :流内容
    Metadata :元数据
    Sectioning :分区
    Heading :标题
    Phrasing :措辞
    Embedded:嵌入的
    Interactive :互动的
    html.spec.whatwg.org
    在这里插入图片描述

    3、按显示

    替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容。
      img、input …
    非替换元素:将内容直接告诉浏览器，将其显示出来。
      div、h1、p …

    display显示框类型

    display：
      block
      inline
      inline-block
      none
    区别：1.dispaly:none 不占空间的隐藏
      2.visibility:hidden 占空间的隐藏

    <style>
    div{width: 100px;height: 100px;background: red;display: inline-block;}
 </style>

    标签嵌套规范

    ul、li
    di、dt、dd
    able、tr、td

    1、块能够嵌套内联

    <div>
	<span></span><a href="#"></a>
</div>

    2、块嵌套块

    <div>
	<div></div>
</div>

    错误的写法
    eg：p标签补课嵌套

    <p>
	<div></div>
</p>

    3、内联是不能嵌套块

    错误的写法：

    <span>
	<div></div>
</span>

    特殊:
    (正确的写法)

    <a href="#">
	<div></div>
</a>

    注：（a里面不能再写a）

    溢出隐藏

    overflow：
      visible :默认
      hidden
      scroll（一直显示滚动条）
      auto（字多的时候显示滚动条）
      x轴、y轴
      在这里插入图片描述

    解决方法：

    <style>
    div{width: 100px;height: 100px;border:1px black solid;overflow:hidden;}
</style>

    透明度与手势

    opacity:
      opacity: 0（透明，占空间）~1（不透明）、0.5（半透明）
    注：
     占空间，所有的子内容也会透明

    rgba
      rgba() : 0~1
    注：
     可以让指定的样式透明，而不影响其他样式

    cursor : 手势
     default : 默认手势
     要实现自定义手势：
      准备图片： .cur 、.ico （ur(图片地址),auto;）

    最大、最小宽高

    min-width、min-height（扩）
    max-width、max-height（缩）
     注：强化对百分比的理解
     %单位：换算 ->以父容器的大小进行换算的

    （一个容器怎么适应屏幕的高：肉鳍加height：100%； body%； html：100%）

    CSS默认样式

    有些标签有默认样式，有些标签没有默认样式。

    没有默认样式:
      div、span、…

    有默认样式:
      body、h1…h6、p、ul、…

    body -> marign : 8px
    h1 -> marign : 上下 21.440px
    p -> marign : 上下 19px
    ul -> marign : 上下 16px  padding ：左 40px
       默认点：list-style : disc
    a -> text-decoration: underline;

    CSS重置样式（reset）

    简单的CSS reset :
      *{ margin:0; padding:0; }
      ul{ list-style:none; }
      a{ text-decoration:none; color:#666; }
      img{ display:block; }

    CSS reset :
     margin:e; padding:e;}
      优点:不用考虑哪些标签有默认的margin和padding
      缺点:稍微的影响性能
      body,p,h1,ul{ margin:0; padding:0; }

    1.ul{ list-style : none;}

    2.a{ text-decoration: none; color:#999;}

    3.img{ dispaly:block }
     问题的现象:图片跟容器底部有一些空隙。
      内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
       vertical-align: baseline;基线对齐方式，默认值
       img{ vertical-align:bottom;}解决方式是推荐的
    常见的CSS重置样式
    在这里插入图片描述

    写具体页面的时候或一个布局效果的时候;
      1，写结构
      2. css重置样式
      3. 写具体样式

    float浮动

    1、float浮动概念

    文档流
      文档流是文档中可显示对象在排列时所占用的位置。

    float特性
      加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

    float取值
      left
      right
      none(默认)
    eg：

    <style>
    body{ border:1px black solid; }
    #box1{ width: 100px;height: 100px; background:yellow; float: left;}
    #box2{ width: 200px;height: 200px; background:red; float: left;}
    </style>                             
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

    2、float注意点

    1.只会影响后面的元素。

    <style>
    body{ border:1px black solid; }
    #box1{ width: 100px;height: 100px; background:yellow;}
    #box2{ width: 200px;height: 200px; background:red; float: left;}
    #box3{ width: 200px;height: 200px; background:blue;}
    </style>                             
    </style>                             
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

    在这里插入图片描述
    2.内容默认提升半层。
    （不被覆盖）

    3.默认宽根据内容决定。
    （例如：文字长度）

    4.换行排列。
    （浮动元素放不下会折行，第二行元素可能会被第一行元素挡住而不会顶到最左边）

    5.主要给块元素添加，但也可以给内联元素添加。

    3、清除float浮动

    上下排列：
      clear属性，表示清除浮动的，left、right、both(全部)

      <style>
    #box1{ width: 100px;height: 100px; background:yellow;float: left;}
    #box2{ width: 200px;height: 200px; background:red;clear: both;}                           
  </style>                             
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

    嵌套排列:
    固定宽饰 : 不推荐，不能把高度固定死，不适合做自适应的效果。
    父元素浮动 : 不推荐，因为父容器浮动也会影响到后面的元素。
    overflow : hidden (BFC规范)，如果有子元素想溢出，那么会受到影响。
    display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
    设置空标签 : 不推荐,会多添加一个标签。
    after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
    （clear属性只会操作快标签，对内联标签不起作用）
    after伪类 :

     <style>
    #box1{ width: 100px;border: 1px black solid}
    #box2{ width: 200px;height: 200px; background:red;float: left;}
    .clear::after{content:'';clear:both;display: block;}
</style>                                                          
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
</body>
</html>

    float制作页面小结构

    在这里插入图片描述

    <!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;
        }

        ul {
            list-style: none;
        }

        img {
            display: block;
        }

        a {
            text-decoration: none;
            color: #666
        }

        h1,
        h2,
        h3 {
            font-size: 160px
        }

        ;

        .l {
            float: left;
        }

        .r {
            float: right;
        }

        .clear {
            content: "";
            display: block;
            clear: both;
        }

        #main {
            width: 366px;
            margin: 20px auto;
        }

        #main .title {
            height: 23px;
            line-height: 23px;
            font-size: 12px;
            font-weight: bold;
            padding: left 30px;
            background: url(图片地址1) no-repeat 6px 4px, url(图片地址2) repeat-x;     先写的是在上面的图
        }

        #main ul {
            overflow: hidden;
            margin-top: 13px;
        }

        #main li {
            margin-bottom: 22px;
        }

        #main .pic {
            width: 100px;
            border: 1px soled #c8c4d3;
            margin-left: 5px;
        }

        #main .pic img {
            margin: 2px;
        }

        #main .content {
            width: 240px;
            font-size: 12px;
            line-height: 20px;
        }

        #main .content h2 {
            font-size: 12px;
            line-height: 24px;
        }

        #main .content p {
            font-size: 12px;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <h2 class="title">外媒评论精选</h2>
    <ul>
        <li>
            <div class="l pic">
                <a href="a">
                    <img src="" alt="">
                </a>
            </div>
            <div class="1 content">
                <h2>测试标题</h2>
                <p>测试段落
                    <a href="a">
                        <img src="" alt="">
                    </a>
                </p>

            </div>
        </li>
        <li>
            <div class="l pic">
                <a href="a">
                    <img src="" alt="">
                </a>
            </div>
            <div class="l content">
                <h2>测试标题</h2>
                <p>测试段落
                    <a href="a">
                        <img src="" alt="">
                    </a>
                </p>

            </div>
        </li>
        <li>
            <div class="l pic">
                <a href="a">
                    <img src="" alt="">
                </a>
            </div>
            <div class="l content">
                <h2>测试标题</h2>
                <p>测试段落
                    <a href="a">
                        <img src="" alt="">
                    </a>
                </p>

            </div>
        </li>
    </ul>
</body>

</html>
csdn_nevermore
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【盒子嵌套和基本布局】
akisi的博客
12-07 1万+
首先是盒子嵌套的一般步骤： 定义两个盒子的样式之后，在body里面这样写： <div class="zuo">大盒子 <div class="gao">小</div> </div> 这样大盒子就可以包裹住小盒子了，例如： 这个盒子嵌套的代码如下： <!DOCTYPE html> <html lang="en"> <head> <met...
HTML盒模型
QuickRabbit的博客
04-09 4630
盒模型 ​ 什么是盒模型：每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排序而成。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSHciGHI-1649508211222)(C:\Users\Guolan\AppData\Local\Temp\1649504298774.png)] ​ 整个盒模型的组成由上图所示，盒子的内容大小由width宽度和height高度指定，padding设置盒内边距，border设置盒子边框，margin设
HTML+CSS自用知识点（第三周）
Meg_Fu的博客
11-04 523
  CSS:#elem()    HTML:id=“elem” 注：  1.在一个页面中，ID值是唯一的。  2.命名规范，字母 _ - 数字(命名的第一位不能是数字)。  3.命名方式：    驼峰式：searchButton（小驼峰）SearchButton（大驼峰，不建议）    下划线式：search_small_buttom    短线式：search-small-buttom  css：.elem{} html：class = “elem” 注： 1.class选择器是可以复用的。 2.可以添
一个简单的盒模型嵌套---一个大盒子里面嵌套两个中盒子，右边中盒子嵌套六个小盒子
世上无难事，只要肯攀登
04-20 3759
六个小盒子下面有一点空，再加一个盒子来存放文本。
前端基础之盒子嵌套
clover_oreo的博客
12-07 4157
附上知识点： 1、网页布局的过程 先准备好相关的网页元素，网页元素基本都是盒子box 利用css设置好样式，摆放到合适的位置上去 往盒子里面装内容 本质就是利用css摆放盒子 2、盒子模型的组成（Box Model） border 边框 content 内容 padding 内边距 margin 外边距 3、边框border 边框有三部分组成：宽度、样式、颜色 border-width:单位一般是px border-style：solid、dotted、dash...
WEB入门.六 盒子模型
张晨光老师的播客
02-16 1万+
学习内容ØCSS盒子模型Ø盒子之间的关系Ø页面元素定位能力目标Ø理解盒子模型Ø理解内容与表现分离的优点Ø理解并掌握盒子之间的关系Ø理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页面布局的基础知识，了解了设计一个标准的 XHTML页面需要遵循的规范，例如：标签需要关闭、使用
五个盒子嵌套 无bug
最新发布
2202_75800213的博客
07-12 218
【代码】五个盒子嵌套 无bug。
HTML与CSS结合制作相应的盒子模型
qq_64314976的博客
08-19 1651
综合应用HTML基本技术、CSS表格技术和相应的盒子模型概念来设计实践内容，以更简洁、更丰富的效果呈现出来。利用盒子模型完成相应内容，除显示新闻、公告列表可以使用表格外，其他布局尽量使用div等元素。页面布局参考如下：Banner栏横向填充，width=“100%”；主体内容区固定宽度，width=“1000”，使用嵌套表格进行布局和排版；底边栏横向填充，width=“100”%。
web前端开发盒子套盒子问题
Cathy___Sun的博客
09-10 1595
web前端块级元素和行内元素
CSS盒子模型
a1234556667的博客
10-13 548
认识盒子模型 所谓的盒子模型在HTML中就是一个盛装 元素内容的容器。 每个盒子模型都由元素的内容、内边距 （padding）、边框（border）和外边距（margin）组成。 <div>标记 Ø<div>标记是一个块容器标记。 Ø可以将网页分割为独立的部分，以实现网页的规划和布局。 Ø大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。 Ø可以替代大多数的块级文本标记。 ..
HTML/CSS 三个小盒子在一个大盒子中水平居中
热门推荐
木木木森林
01-05 1万+
HTML/CSS 三个小盒子在一个大盒子中水平居中 方法一：把子盒子变成行内块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .big { width: 600px; height: 600px
盒子嵌套模型
weixin_45591028的博客
02-24 1448
盒子模型 作用     进行网页布局 网页中盒子的组成 border（边框） padding（内边距） margin（外边距） 1.Border（边框） ☞ border-width：        边框宽度 ☞ border-style：  &nbsp...
CSS解决盒子模型嵌套
qq_41177361的博客
12-16 7201
一、实现一个超链接，鼠标点上去变色。 要点：通过伪类来切换什么状态：总共有初始状态 被访问 鼠标移动 点击 四个状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-20 1475
一、实现效果 二、基本 HTML 结构 三、设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四、设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五、设置列表盒子样式 ( 删除列表样式 | 背景图片及位置设置 )
关于HTML标签、列表、语义化、超链接的一些知识
爱敲代码的狼仔
07-14 179
标题标签 使用 <h1></h1>---<h6></h6> 特点： 有默认的样式 字体加粗 字号根据 标题的权重依次 变小 标题的内容会自动换行 语义： 代表 标题 有利于 搜索引擎的优化 使用时： 即使在没有css的情况下 也能够 很直观表现页面的结构 注意事项： h1 标签 一个网页中 只能使用一次， h2-h6 可以多次使用 根据标题的权重依次 按照顺序使用 ，不能跨级使用 应用场景： 信息或者文章类型的页面中 用于 文章或者信
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
aijianhuang8866的博客
07-20 1071
Div+CSS(嵌套+盒模型)布局页面完整实例流程： <!DOCTYPE html><html><head><meta charset="UTF-8"><title>中国石油大学</title></head><style>*{margin: 0px auto;p...
使用container的嵌套实现下面布局_CSS Flexbox 布局完全指南 Part 2（含示例）
weixin_39575937的博客
11-29 423
Photo byIgor MiskeonUnsplash理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。在《CSS Flexbox 布局完全指南 Part 1(含示例)》中，我们介绍了如何用 Flexbox 制作一个影片集，如何通过 Flexbox 布局卡片，如何使用 Flexbox 创建网格布局。现在我们继续介绍更多示例。示例四：如...
10、标签的嵌套和标签嵌套的意义
山兔的博客
01-03 1903
标签的嵌套 一个标签可以嵌套（包含）其他标签 div标签嵌套span标签，建议写成三行，会比较好看 下面的嵌套写法是错误的，不符合HTML语法 因为它们相互嵌套，这明显是错误的 因为br标签是单标签，不存在结束标签，这应该写成两个独立的标签 编写一个HTML中不存在的标签，会发生什么事？ 也是可以正常显示的 注意 有语法错误的HTML代码，还是可以被浏览器识别显示出来 建议：还是要严格按照HTML语法去编写代码，才能保证最终显示出来的效果是正确的 虽然浏览器的容错能力比较强，但有时候还是会显示出一些
2023.2.20
weixin_43550562的博客
10-19 3020
html css 1.让一个div垂直居中 2.css三栏布局 <div class="container"> <div class="left"></div> <div class="main">center</div> <div class="right">right</div> </div> .container{ display: flex; } .left{
CSS 主流布局进阶
weixin_49809163的博客
03-26 2300
CSS 主流布局进阶 —— PS还原设计图、Flex 布局、Grid 布局、移动端适配、响应式布局
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值