2.16html总结

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量115 收藏
点赞数
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57282850/article/details/129070128
版权

1.盒子模型

<!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>
        *{
             margin: 0;
             padding: 0;
             /* 取消a标签的下划线 */
             text-decoration: none;
        }
        p{
            width: 200px;
            /* padding: 上 右 下 左
               padding: 上 右/左 下
               padding: 上/下 左/右
               padding: 上下左右
             */
             /* padding-top:单独设置上内边距
                padding-right:单独设置右内边距
                padding-bottom:单独设置下内边距
                padding-left:单独设置左内边距
              */
            padding: 10px 20px 30px 40px;
            padding: 10px 20px 30px;
            padding: 10px 20px;
            padding: 10px;
            /* padding-left: 10px; */
            padding-left: 40px;
            /* border：粗细 样式 颜色 
               */
            /* border-style:上 右 下 左
                取值顺序与padding相同
                可选值：
                     solid:实线
                     dashed：虚线
                     double：双线
                     dotted:点线
            浏览器默认边框是2像素黑色，没有样式
            border-top/right/bottom/left:单独设置上、右、下、左的边框样式
             */
            /* border: 3px solid red; */
            /* border-style: solid dashed double dotted;
            border-color: blue yellow pink gray;
            border-width: 1px 3px 5px; */
            border-bottom: 3px solid yellowgreen;
            /* 单独设置下边框的颜色 */
            border-bottom-color: brown;
            /* border-style: solid dashed ; */
            margin-top: 20px;
            /* border-box:边框盒：border+padding+content
         */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 盒子模型组成部分：标准盒子
        从内向外
        1.内容区：content：分内容的
        2.内边距：padding：设置内容与边框的距离
        3.边框：border：设置区分盒子内外
        4.外边距：margin：设置元素与元素之前的距离，设置元素的位置
          用法与padding基本一致 -->
    <!-- 盒子模型的理解：组成部分及各自的含义
                   盒子模型的分类：
                    标准盒子/W3C盒子：元素默认设置的宽度和高度是指内容区域
                    IE盒子/怪异盒子：元素默认设置的宽度和高度是指内容区域+内边距+边框
        box-sizing:设置盒子尺寸，设置width和height作用的对象
               默认值：content-box：内容盒
                    border-box：边框盒：这时设置的宽度和高度=border+padding+content-->
        <p>
            得仆两郭陈是卡斯望极皇。
        </p>
        <p id="first">lorendjkfjf</p>
        <h3>量鲜弟了。</h3>
        <a href="#">判下叹由要。</a>
</body>
</html>

2.边框

<!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>
        p {
            width: 200px;
            height: 40px;
            /* 单行文本垂直居中 */
            line-height: 40px;
            border: 3px solid red;
            /* 设置边框弧度 */
            border-radius: 30px;
        }

        /* 设置圆：width=height
                border-radius=半径=一半的宽高 */
        div.cri {
            background-color: pink;
            width: 200px;
            height: 200px;
            /* 50%:是指当前元素的宽高的50% */
            border-radius: 50%;
            border-radius: 50% 50% 50% 50%;
        }

        /* 设置半圆：上半圆 */
        div.cri1 {
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            /* 左上和右上=》大小应该是半径 
               border-radius的值=半径*/
            border-radius: 100px 100px 0 0;
        }

        /* 设置四份之一圆  左上*/
        div.cri2 {
            width: 100px;
            height: 100px;
            background-color: gold;
            border-radius: 100px 0 0 0;
            border-radius: 100% 0 0 0;
        }
        /* 通过边框设置三角形：
           注意：1.元素宽高设置为0
                 2.通过透明色要设置 */
        .squ {
            /* width: 10px;
            height: 10px; */
            width: 0;
            height: 0;
            border: 20px solid red;
            border-color: red yellowgreen blue gold;
            border-color: transparent transparent blue transparent;

            /* border-width: 0 0 20px 0; */
        }
    </style>
</head>

<body>
    <!-- 1.边框弧度
         border-radius：左上 右上 右下 左下 -->
    <p>让害毒，身变。</p>
    <div class="cri"></div>
    <div class="cri1"></div>
    <div class="cri2"></div>
    <br>
    <hr>
    <!-- 小三角形 -->
    <div class="squ"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</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>
        * {
            margin: 0;
        }

        div {
            background-color: pink;
            width: 200px;
            height: 30px;
            line-height: 30px;
        }

        p {
            background-color: aqua;
            width: 200px;
            height: 30px;
            line-height: 30px;
            /* 设置元素隐藏 */
            display: none;
            /* 设置元素不可见 */
            /* visibility: hidden; */
        }

        div:hover>p {
            /* 设置元素显示 */
            display: block;
            /* 设置元素可见 */
            /* visibility: visible; */
        }
    </style>
</head>

<body>
    <!-- 显示隐藏
        display：
             可选值：none（影藏）block（显示）
        visibility:
             可选值：hidden（元素不可见）visible（元素可见）
        区别是display设置隐藏时，不占用原来的位置
            visibility设置元素不可见时，依旧占有原来的位置 -->
    <div>Lorem, ipsum dolor.
        <p>人也反成，主。</p>
        <h2>别人尹未。</h2>
    </div>

</body>

</html>

4.外边距

<!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>
        /* 取消浏览器的基本样式 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 兄弟元素 */
        p:nth-of-type(1) {
            width: 200px;
            height: 40px;
            background-color: pink;
            margin-bottom: -20px;
        }

        p:nth-of-type(2) {
            width: 200px;
            height: 40px;
            background-color: blue;
            margin-top: 30px;
        }

        /* 父子 */
        .fa {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 20px 30px 0 20px;
            /* 方法1
            border-top: 20px solid transparent;
            box-sizing: border-box; */
            /* 方法2 */
            /* padding-top: 50px;
            box-sizing: border-box; */
            /* 方法3 overflow: auto;
            overflow: hidden;
            overflow: scroll; */
            
        }
        /* .son::before {
            content: "hgjgj ";
           
        }
        .son::after {
            content: "hgjgj ";
           
        } */
        /* 方法五
        .fa::before {
            content: "";
            display: table;
        } */
        .son {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-left: 50px;
            margin-top: 50px;
        }
        .span1 {
            /* margin-top: 30px; */
            background-color: yellowgreen;
            /* display: inline-block; */
            margin-right: 20px;
        }
        .span2 {
            background-color: bisque;
            margin-left: -20px;
        }
        span{
            display: inline-block;
        }
    </style>
</head>

<body>
    <!-- margin：设置元素与元素之间距离 -->
    <!-- <span class="span1">lorem</span>
    <span class="span2">lorem</span> -->
    <!-- 垂直方向
        块元素
            兄弟： 二个都是正值：谁大听谁的
                   一正一负：二者相加
                   二者都是负数：看绝对值大的
            父子：出现的问题：外边距重叠问题=》父子元素的外边距开始位置重合在一起
                  解决思路：使父子外边距开始位置不同 
                解决方法：
                   1.给父元素设置边框=》问题：①.会撑开父元素；box-sizing:border-box
                                            ②.子元素的margin-top设置的距离是上边框离父元素上底边距离
                   2.给父元素设置内边距=》问题：会撑开父元素：box-sizing：border-box
                   3.给父元素开启bfc
                      bfc（Block Formatting Context，块级格式化环境），是css的隐形属性，将父元素开辟一个单独的空间，
                       开启bfc方法：
                           1.overflow的值非visible，但是副作用最小的是hidden  
                           2.设置浮动，后面会说
                           3.设置绝对定位
                   4.在html里面添加一个空的table，影响到html结构
                   5.给父元素设置伪元素::before（注：伪元素选择器是在父元素里面添加一个子元素）添加一个table
        行元素：在垂直方向可以设置外边距，但是没有效果
        行内块：二者正值：二者相加
      -->
      <!-- 水平方向：
            行元素&行内块元素：二者都是正值，一正一负：相加 ，注意行内块元素在默认情况有空白间隙-->
    <!-- 兄弟 -->
    <!-- <p>lorem1</p>
    <p>lorem2</p>
    <hr> -->
    <!-- 父子 
      需求：1.子元素离父元素左边50px
            2.子元素离父元素顶边50px
        -->
    <div class="fa">
        <!-- 方法4
        <table></table> -->
        <div class="son">
            <!-- <p>与宋判会，最。</p> -->
        </div>
    </div>
    <span class="span1">
        手目公位若定，变这。
    </span>
    <span class="span2">德变可人落。</span>
</body>

</html>

5.盒子的水平布局

<!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>
        .fa {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            /* 水平：200+20+20+20=260px<500px */
            width: 200px;
            /* width: auto; */
            height: 200px;
            margin:0 10px;
            /* margin-left: auto;
            margin-right: auto; */
            padding: 0 10px;
            /* padding: auto; */
            border: 10px solid red;
            background-color: aqua;
            /* margin-top: auto;
            margin-bottom: auto; */
        }
        /* 盒子模型：content padding border margin */
        /* 水平布局：
               width+padding+border+margin<父元素的width 
               1. width+padding+border+margin都设置了确定值
                  当小于父元素的width时，多余的部分给margin-right吸收
               2.当width不设置或者设置为auto值时，多余的部分有宽度吸收
                 当margin-left=auto,多余的部分由margin-left吸收
                 当margin-right=auto,多余的部分由margin-right吸收
               总结：当设置了auto就将多余的部分给它，注意能设置auto值的属性：width，margin-left，margin-right
               3.有二个属性设置auto时
                 width与margin-left/width和margin-right同时设置auto值时，对于部分有width吸收，margin-left/margin-right没有值
                 margin-left和margin-right同时设置为auto时，多余部分平分给左右外边距=》块元素的水平居中
               4.设置三个auto
                width与margin同时设置auto时，多余部分由宽度吸收

            */
            /* 垂直方向：设置多少就是多少 */
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>

602源
关注
HTML学习笔记
橘颂的博客
07-10 645
学习笔记
jenkins-2.16
01-21
官网下载太慢，现提供官网下载的war版本，可以直接jar启动，也可以放在tomcat等容器中，简单方便，分享给有需要的同学们
2.16 总结
m0_63713211的博客
02-16 315
Web APIs 页面交互功能 API：（应用程序编程接口 ）一些预定义的函数，帮我们实现某种功能 Web API:是浏览器提供的一套操作浏览器功能和页面元素的API DOM（文档对象模型）标准编程接口 通过DOM接口改变页面内容，结构，样式 文档：一个页面就是一个文档（document） 元素：页面中所有标签(element) 节点：页面中所有的内容（标签，属性，文本，注释） （node） 获取元素 ID获取（getElementById） 得先有标签，script写到标签下面 括
2.16个人总结
weixin_30852367的博客
02-16 102
　　鼎鼎大名。 　　又是一年春节，腊月二十三我踏上了回家的旅途，大约下午六点到达我们大名，我爸爸去接的我，现在留在脑海里的是：冷冷的风、平整的路、橘黄的路灯。几个月不见，家乡变化真大啊！在QQ空间刷到了大名的夜景（那两天基本被同一条说说刷屏），我也大致了解到了家乡的变化，实在没想到的就是村里面修了平整的大路、竖起了足以看清路的灯，家乡变得越来越好了呐！第二天应邀和高中死党聚一聚，开着电...
2.16总结
weixin_45955339的博客
02-17 120
筛选 //过滤 //eq(index|-index) first() //过滤出第一个元素 //last() //hasClass(class) //filter(expr|obj|ele|fn) //is(expr|obj|ele|fn) //map(callback) //has(expr|ele) //not(expr|ele|fn) //slice(start,[end]) //主要用...
2.16学习总结
qq_45255560的博客
02-16 53
左右margin相加，上下margin取大值左右margin设置离父元素左右的距离，上下margin可能会传递给父元素上下的padding和margin都有效，但是不影响上下元素的布局，左右与块元素相同给与父元素相邻子元素一个上/下的外边距，会传递到父元素解决方案1：给父元素设置display：flex解决方案2：给父元素添加一个边框，此时要注意边框会撑大元素本身，所以此时需要添加box-sizing：border-box。
HTML基础总结
wyh2001ok的博客
06-22 49
作用：学前端的基础知识，与HTML的基础知识总结
2.16html日记——显示与隐藏//盒子水平布局
xiaolong200915的博客
02-16 273
2.16html日记——显示与隐藏//盒子水平布局
Html介绍及标签使用总结
一只菜鸡
04-01 255
html标签的使用 1 关于html的基本语法介绍 <!DOCTYPE html>：当前html版本的引用以及相关配置文件的引入 <head>：页面头部信息网页名称，字符编码集的相关配置 <body>：网页的主体部分 注意：Html是严格注意书写规范的，标签总是成对出现的，开始和结束标签一定要注意书写规范，另外，代码书写的工整美观也是考核一个合格程序员的标准。...
html篇
qq_45912645的博客
12-22 562
一，HTML 一种解释型语言，或者说“超文本标签语言” 1.1单双标签 <标签名/> <标签名>内容<标签名/> 1.2、HTML标签关系 标签的相互关系就分为两种： 1.嵌套关系 <head> <title> </title> </head> 2,并列关系 <head> </head> <body> </body> 2.1工具 VSCode Dreamw
gerrit-2.16.6
03-01
gerrit-2.16.6 一种免费、开放源代码的代码审查软件，使用网页界面。利用网页浏览器，同一个团队的软件程序员，可以相互审阅彼此修改后的程序代码，决定是否能够提交，退回或者继续修改。
git-2.16-64位
04-27
Git-2.16是Git的一个特定版本，此版本带来了许多改进和新特性，使得软件开发团队能够更高效地协作和管理代码库。 Git的核心理念是快照式版本控制，它不跟踪文件的修改，而是保存每次提交时整个项目的状态。这种设计...
atmel SAM-BA 2.16
07-07
《Atmel SAM-BA 2.16：芯片烧写工具的增强版》 Atmel SAM-BA（System Analyzer, Microcontroller Bootloader and Application）是一款由Atmel公司开发的微控制器编程工具，专用于对Atmel系列芯片进行固件烧写、调试...
libapreq2-2.16.tar.gz
08-31
《Apache请求库libapreq2-2.16详解》 libapreq2是一个功能强大的Apache模块，专门用于处理Web应用程序中的HTTP请求。这个压缩包文件"libapreq2-2.16.tar.gz"包含了libapreq2的2.16版本，它是一个开源的C语言库，为...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1071
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 991
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 397
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 242
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
mobiscroll 2.16 api
10-02
Mobiscroll 2.16是一款用于移动设备和Web应用程序的UI控件库。它提供了许多不同类型的可定制的UI控件，如日期选择器、时间选择器、滚动选择器等，帮助开发者创建更友好和可靠的移动用户界面。 Mobiscroll 2.16的API...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值