css的盒子模型

时间 2020-02-01

标签 css 盒子模型栏目 CSS 繁體版

原文原文链接

width和height是指content内容的宽高css

当width的值小于min-width时，则宽度为min-widthhtml

当width的值大于max-width时，则宽度为max-width浏览器

min-width和max-width存在兼容性问题，在IE6如下不支持字体

哪些元素能够设置宽高属性spa

块级元素
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>、<dl> 、<dt> 、<dd>等code

替换元素
<img>、<input>、<textarea>等htm

若是图片既经过width来设置宽度，又经过css样式来设置宽度，最终宽度为css样式中设置的宽度blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         /*实际尺寸为200px*/
        img{width:200px;}
    </style>
</head>
<body>
    <img src="cat.jpg" alt="cat" width="100px">
    
</body>
</html>

border-style的值继承

none 定义无边框。默认值
hidden 与 “none” 相同。除非在表格元素中解决边框冲突时
dotted 定义点状边框。在大多数浏览器中呈现为实线
dashed 定义虚线。在大多数浏览器中呈现为实线
solid 定义实线
double 定义双线
groove 定义 3D 凹槽边框
ridge 定义 3D 垄状边框
inset 定义 3D inset 边框
outset 定义 3D outset 边框
inherit 规定应该从父元素继承边框样式图片

border能够四个边分开设置

border-left

border-right

border-top

border-bottom

    <style>
         p{width:200px;height:100px;border-top:1px solid blue;}
    </style>

padding缩写：

padding : 值1； //4个方向都为值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值4

margin值能够为负值，padding值不能够为负值

垂直方向上，两个相邻元素都设置外边距，外边距会发生合并

合并高度=两个外边距高度中的最大值

标准盒子模型

宽度=内容宽度

高度=内容高度

盒子在页面中所占的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距

盒子在页面中所占的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

盒子的实际宽度是：左边框+左内边距+内容宽度+右内边距+右边框

盒子的实际高度是：上边框+上填充+内容高度+下填充+下边框

IE盒子模型

宽度=左边框+左填充+内容宽度+右填充+右边框

高度=上边框+上填充+内容高度+下填充+下边框

盒子在页面中所占的宽度=左边距+宽度+右边距

盒子在页面中所占的高度=上边距+高度+下边距

若是有DOCTYPE文档声明，则全部浏览器会统一按照标准盒子模型来解析

display:inline; 内联，先后没有换行符

行内元素没法设置宽和高，外边距只能设置左右的，没法设置上下的

display:block; 块，先后带有换行符

内联元素之间有缝隙，是由于存在换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{border:1px solid;}
    </style>
</head>
<body>
    <span>内联元素1</span>
    <span>内联元素2</span>
    <span>内联元素3</span>
</body>
</html>

解决方法一：取消换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{border:1px solid;}
    </style>
</head>
<body>
    <span>内联元素1</span><span>内联元素2</span><span>内联元素3</span>
</body>
</html>

解决方法二：在外层加div，设置字体为0，给子元素单独设置字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{font-size:0px;}
        span{border:1px solid;font-size:16px;}
    </style>
</head>
<body>
    <div>
        <span>内联元素1</span>
        <span>内联元素2</span>
        <span>内联元素3</span>
    </div>
    
</body>
</html>

display:none 不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{color:#000;text-decoration: none;}
        span{display: none;;}
        a:hover span{display: inline-block;}
    </style>
</head>
<body>
    <a href="#">指我……<span>和你捉迷藏</span></a>
    
</body>
</html>

1. CSS盒子模型
2. CSS-盒子模型
3. 【CSS】盒子模型
4. css盒子模型
5. css盒子模型、
6. CSS 盒子模型
7. CSS---盒子模型
8. CSS——盒子模型
9. CSS - 盒子模型
10. CSS"盒子模型"
更多相关文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 委托模式
• Kotlin学习（二）基本类型