HTML-3

1.盒子模型

　　盒子模型：是把HTML页面中的布局元素看成一个矩形的盒子。CSS盒子模型的本质上是一个盒子

  • 边框（border）

　　　border可以设置元素的边框。边框由三部分组成边框宽度（粗细）边框样式 边框颜色

属性 作用
border-width 定义边框的粗细，单位是px
border-style 边框的样式
border-color 边框颜色
    • border-collapse属性控制浏览器绘制表格边框的方式（collapse是合并的意思）
    • 边框会额外增加盒子的实际大小
      • 测量盒子时，不量边框
      • 如果测量时包含了边框，则需要在设置width/height时减去边框
  • 内边距（padding）

　　　　padding属性用于设置内边距，及边框与内容之间的距离

值的个数 表达含义
padding: 5px 1个值，代表上下左右都有5像素内边距
padding: 5px 10px 2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding: 5px 10px 20px 30px 4个值，上是5像素，右是10像素，下是20像素，左是30像素，顺时针
    • padding会影响盒子实际的大小　　　

　　　　　　当盒子已经有了宽度和高度时，再对padding进行设置，会影响盒子的实际大小

    • 新浪导航栏
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             * {
 8                 padding: 0;
 9                 margin: 0;
10             }
11             .nav {
12                 border-top: 3px solid #ff8500;
13                 border-bottom: 1px solid #edeef0;
14                 list-style: none;
15                 margin: 40px 20px;
16                 background-color: #fcfcfc;
17                 color: #4c4c4c;
18                 height: 41px;
19             }
20             .nav li {
21                 float: left;
22                 padding: 0 20px;
23                 cursor: pointer;
24                 line-height: 41px;
25             }
26             .nav li:hover{
27                 background-color: #eee;
28                 color: #FF8500;
29             }
30         </style>
31     </head>
32     <body>
33         <div class="box">
34             <ul class="nav">
35                 <li>设为首页</li>
36                 <li>手机新浪网</li>
37                 <li>移动客户端</li>
38                 <li>博客</li>
39                 <li>微博</li>
40                 <li>关注我</li>
41             </ul>
42         </div>
43     </body>
44 </html>
复制代码
    • 当一个盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
  • 盒子外边距margin
    • 块级盒子水平居中（常见写法：margin-left: auto;margin-right: auto、margin: auto、margin: 0 auto）
      • 盒子必须指定了宽度（width）
      • 将盒子的左右外边距设置为auto
      • 注意：以上是让块级元素水平居中的方式，对于行内/行内块元素，则给其父元素添加：text-align: center即可
    • 外边距合并：当上下两个相邻的块元素（兄弟关系）相遇时，如果上面的元素有下边距，下面的元素有上边距，则他们之间的垂直间距，取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并
    • 嵌套块级元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
      • 解决方案：为父元素定义上边框
      • 为父元素定义上内边距
      • 可以为父元素添加overflow:hidden
  • 清除内外边距
1 * {
2                 padding: 0;
3                 margin: 0;
4   }
    • 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

下面是CSS3新增的3个样式，IE9及以上支持

  • 圆角边框（border-radius: length）

 　　　　radius半径（圆的半径）原理：（椭圆）与边框的交集形成圆角效果

    • 参数值可以是数值或者百分比
    • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .yuanxing {
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: pink;
11                 /* 50%就是宽度的一半 等价于100px */
12                 border-radius: 100px;
13             }
14             
15             .yuanjiaojuxing {
16                 width: 200px;
17                 height: 100px;
18                 background-color: pink;
19                 border-radius: 50px;
20             }
21         </style>
22     </head>
23     <body>
24         1.原型的做法
25         <div class="yuanxing"></div>
26         2.圆角矩形的做法
27         <div class="yuanjiaojuxing"></div>
28     </body>
29 </html>
复制代码
  • 盒子阴影：box-shadow

　　　　box-shadow: h-shadow x-shadow blur spread color inset

值 描述
h-shadow 必须，水平阴影的位置，允许负值
x-shadow 必须，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选。阴影的颜色
inset 可选，将外部阴影（outset）改为内部阴影，（注意：默认是outset，不用进行设置，写了不起效果）
  • 文字阴影：text-shadow: h-shadow v-shadow blur color

  2.CSS浮动

  • 三种传统布局方式
    • 普通流（标准流/文档流）：元素按照默认状态进行布局
    • 浮动
    • 定位
  • 网页布局第一准则：多个块级元素纵向排列标准流，多个块级元素横向排列浮动
  • float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘
    • 浮动元素会脱离标准流（脱标），不再保留原先的位置
    • 浮动的元素会一行内显示并且元素顶部对齐：如果父级盒子装不下这些浮动的盒子，多出的盒子会另起一行显示
    • 浮动的元素会具有行内块元素的特性，如果是行内元素有了浮动，则不需要转换可以直接设置宽高
    • 如果块级元素没有添加宽度，默认是和父级元素一样宽，但当它添加了附送后，它的大小根据内容来定
  • 为了约束浮动的位置，我们一般先用标准流的父元素上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
  • 浮动布局注意点
    • 浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
    • 一个元素浮动了，理论上其兄弟元素也要跟着浮动
    • 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
  • 清除浮动：选择器{clear:属性值;}

　　　　由于父级盒子很多的情况下，不方便给高度，但是盒子浮动又不占位置最后父级盒子高地为0时，就会影响下面的标准流盒子

　　　　本质：清除浮动元素脱离标准文档流造成的影响

    • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，不会影响下面的标准流
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动带来的影响）
right 不允许右侧有浮动元素（清除右侧浮动带来的影响）
both 同时清除左右两侧浮动的影响（实际工作使用）
    • 清除浮动的策略是，闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）
      • 清除浮动的方法：
        • 额外标签法（隔墙法）：在浮动元素的末尾添加一个空的标签添加清除浮动样式，新添加的标签必须是块级元素
        • 父级元素添加overflow属性：将其属性设置为hidden、auto、scroll，缺点是无法显示溢出的部分
        • 父级添加after伪元素，缺点照顾低版本浏览器
        • 父级添加双伪元素，缺点照顾低版本浏览器
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             /* 伪元素清除浮动，伪元素默认是行内元素 */
 8             /** .clearfix:after {
 9                 content: "";
10                 display: block;
11                 height: 0;
12                 clear: both;
13                 visibility: hidden;
14             }
15             
16             .clearfix {
17                 /* IE6、7专有 */
18             /*zoom: 1;
19             } **/
20 
21             /* 双伪元素清除浮动 */
22             .clearfix::before,
23             .clearfix::after {
24                 content: "";
25                 display: table;
26             }
27 
28             .clearfix::after {
29                 clear: both;
30             }
31 
32             .clearfix {
33                 *zoom: 1;
34             }
35 
36             .box {
37                 /* 父级元素添加overflow属性清除浮动 */
38                 width: 800px;
39                 border: #000 solid 1px;
40                 /* overflow: hidden; */
41             }
42 
43             .left {
44                 float: left;
45                 height: 200px;
46                 width: 200px;
47                 background-color: pink;
48             }
49 
50             .right {
51                 height: 300px;
52                 width: 300px;
53                 background-color: skyblue;
54                 float: left;
55             }
56 
57             .cent {
58                 height: 300px;
59                 background-color: #000000;
60             }
61 
62             /* 额外标签法 */
63             /* .clear {
64                 clear: both;
65             } */
66         </style>
67     </head>
68     <body>
69         <div class="box clearfix">
70             <div class="left">1</div>
71             <div class="right">2</div>
72             <!-- 额外标签法，新添加的元素必须是块级元素 -->
73             <!-- <div class="clear"></div> -->
74         </div>
75         <div class="cent"></div>
76     </body>
77 </html>
复制代码

 2.CSS定位

　　定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

　　定位 = 定位模式 + 边偏移

　　定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置

  • 定位模式：决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
  • 边偏移：定位的盒子移动到最终的位置，有top、bottom、left、right4个属性（元素相对于父元素的距离）
  • 定位
  • 静态定位static：静态定位是元素的默认方式，无定位的意思
    • 选择器 {pisition: static;}
    • 静态定位按照标准流的特性摆放位置，它没有边偏移
    • 静态定位在布局时很少使用到
  • 相对定位relative（重要）：元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
    • 选择器 {position: relative;}
    • 移动位置的时候参照点是自己原来的位置
    • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，仍然保留原来的位置）
  • 绝对定位absolute（重要）：元素在移动位置的时候，是相对于它的祖先元素来说的
    • 选择器 {pisition: absolute;}
    • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
    • 如果父级有定位，则以父元素为准定位
    • 绝对定位不再占有原来的位置（相当于脱离文档流）
    • 绝对定位的盒子居中
      • 选择器 {left: 50%; margin-left:-width*50%;}（水平居中）
      • 选择器 {top: 50%; margin-top:-height*50%;}（垂直居中）
  • 子绝父相：子级使用绝对定位，父级则要使用相对定位
    • 父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
  • 固定定位fixed（重要）：元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动式元素的位置不会改变
    • 选择器 {position: fixed;}
    • 以浏览器的可视窗口为参照点移动元素
    • 跟父元素没有任何的关系
    • 不随滚动条滚动
      • 固定定位小技巧：固定在版心右侧位置
        • 让固定定位的盒子left:50%
        • 让固定定位的盒子margin-left: 版心宽度的一半距离
    • 固定定位不占有原来的位置
  • 粘性定位sticky：可以被认为是相对定位和规定定位的混合（兼容性特别差，IE不支持）
    • 选择器: {position:sticky; top: 10px;}
    • 以浏览器科室窗口为参照点移动元素（固定定位特点）
    • 粘性定位占有原先的位置（相对定位的特点）
    • 必须添加top、left、right、bottom其中一个值才有效
  •  定位叠放次序z-index

　　　　在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）

    • 选择器 {z-index: ;}
    • 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
  •  定位的特殊特性
    • 绝对定位和固定定位和浮动类似
      • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
      • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小就是内容的大小
      • 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题
      • 绝对定位（固定定位）会完全压住盒子
    • 定位的拓展
      • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
        • 浮动不会压住文字的原因，因为浮动产生的目的最初是为了做文字的环绕效果的，文字会围绕浮动元素
      • 绝对定位（固定）定位完全压住盒子（即压住标准流的所有内容）
  • 淘宝焦点图案例
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10             }
11         
12             div {
13                 position: relative;
14                 height: 300px;
15                 width: 450px;
16                 margin: 80px auto;
17             }
18             
19             div img {
20                 width: 450px;
21             }
22             
23             .prev,
24             .next {
25                 position: absolute;
26                 top: 50%;
27                 margin-top: -15px;
28                 /* 加了绝对定位的盒子可以直接设置高度和宽度 */
29                 height: 30px;
30                 width: 20px;
31                 background-color: rgba(107,107,107,0.7);
32                 color: aliceblue;
33                 line-height: 30px;
34                 font-size: 20px;
35                 text-decoration: none;
36             }
37             
38             .prev {
39                 left: 0;
40                 border-top-right-radius: 15px;
41                 border-bottom-right-radius: 15px;
42             }
43             
44             .next {
45                 /* 如果一个盒子既有left属性又有right属性，则会默认执行left属性 同理top和bottom会执行top */
46                 right: 0;
47                 border-top-left-radius: 15px;
48                 border-bottom-left-radius: 15px;
49                 text-align: right;
50             }
51             
52             .pic ul {
53                 position: absolute;
54                 left: 50%;
55                 bottom: 10px;
56                 margin-left: -25px;
57             }
58             
59             .pic li {
60                 display: inline-block;
61                 width: 6px;
62                 height: 6px;
63                 background-color: #CCC;
64                 border-radius: 3px;
65             }
66         </style>
67     </head>
68     <body>
69         <div class="pic">
70             <img src="img/2.jpg" />
71             <a class="prev" href="javascript:;" >&lt;</a>
72             <a class="next" href="javascript:;" >&gt;</a>
73             <ul>
74                 <li></li>
75                 <li></li>
76                 <li></li>
77                 <li></li>
78                 <li></li>
79             </ul>
80         </div>
81     </body>
82 </html>
复制代码
  • 网页布局总结
    • 默认下的排布规则就是标准流（垂直的块级盒子显示就用标准流布局）
    • 使得元素脱离标准流的排布规则限制，也就是所谓的浮动脱标（多个块级盒子水平显示就用浮动布局）
    • 定位最大的特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

3.元素的显示与隐藏

  • display：显示隐藏
    • display: none 隐藏对象
    • display: block 除了转换为块级元素之外，同时还有显示元素的思想
    • display隐藏元素后，不再占有原来的位置
  • visibility：显示隐藏
    • visibility: visible 元素可见
    • visibility: hidden 元素隐藏
    • visibility隐藏元素之后，继续占有原来的位置
  • overflow：溢出显示隐藏（制定了如果内容溢出一个元素的框，即超过其指定高度和宽度）时，会发生什么
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超出对象尺寸的内容 超出部分隐藏掉
scroll 不管内容是否超出，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
  • 土豆案例
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             * {
 8                 padding: 0;
 9                 margin: 0;
10             }
11             
12             .play {
13                 position: relative;
14                 width: 450px;
15                 margin: 80px auto;
16             }
17             
18             .play img {
19                 width: 450px;
20                 height: 300px;
21             }
22             
23             .play:hover .shade {
24                 display: block;
25             }
26             
27             .shade {
28                 display: none;
29                 position: absolute;
30                 top: 0;
31                 left: 0;
32                 width: 450px;
33                 height: 300px;
34                 background-color: rgba(0,0,0,0.4);
35                 background-image: url(img/播放.png);
36                 background-size: 40px;
37                 background-repeat: no-repeat;
38                 background-position: center;
39                 cursor: pointer;
40             }
41         </style>
42     </head>
43     <body>
44         <div class="play">
45             <img src="img/2.jpg" >
46             <div class="shade">
47             </div>
48         </div>
49     </body>
50 </html>
复制代码
posted @   Miraitowa56  阅读(73)  评论(0)  编辑  收藏  举报
相关博文：
·  HTML-2
·  HTML-4
·  前端（三）
·  前端三件套系例之CSS——CSS3基础布局
·  2.CSS
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae