盒子模型_盒子模型csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_40512519/article/details/81262828

学习内容：

高和宽设置
边框设置
内外边距设置
盒子的计算
元素显示方式

width:长度值|百分比|auto max-width:长度值|百分比|auto , min-width:长度值|百分比|auto

<style>
        p{background-color: red;width: 400px}
        .one{max-width: 300px}
        .two{min-width: 250px}
</style>
<body>
<p>盒子模型宽度width:400px;</p>
<p class="one">盒子模型最大宽度max-width:300px;</p>
<p class="two">盒子模型最小宽度min-width:250px;</p>
</body>

<style>
        p{background-color: red;width: 400px}
        .one{max-width: 500px}
        .two{min-width: 500px}
    </style>
</head>
<body>
<p>盒子模型宽度width:400px;</p>
<p class="one">盒子模型最大宽度max-width:500px;</p>
<p class="two">盒子模型最小宽度min-width:500px;</p>
</body>

    <style>
        div{width: 600px; background-color: #acacac;}
        p{background-color: red;width: 400px}
        .one{max-width: 500px}
        .two{min-width: 500px}
        .three{min-width: 300px;max-width: 600px}
    </style>
</head>
<body>
<div>
<p>盒子模型宽度width:400px;</p>
<p class="one">盒子模型最大宽度max-width:500px;</p>
<p class="two">盒子模型最小宽度min-width:500px;</p>
    <p class="three">盒子模型最大小宽度min-width和max-width;</p><!--400px-->
</div>

height:同理。

如果width和height不在max和min之间并且大于max，则显示max的值。

如果width和height不在max和min之间并且小于min，则显示min的值。

哪些HTML元素可设置高和宽属性：

块级元素：p div h1-h6 ul li ol dl dt dd
替换元素：浏览器根据其标签的元素与属性来判断显示的具体内容 img input textarea

边框属性：

边框宽度(border-width)
边框颜色(border-color)
边框样式(border-style)

border-width:thin|medium|thick|长度值

border-color:颜色|transparent

border-style:

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

三个值都有，border才能显示出来。

4个不同方向来表示（上、下、左、右）border-[left | right | top | bottom]-width

border-[left | right | top | bottom]-color

border-[left | right | top | bottom]-style

边框缩写：border:[宽度] | [样式] | [颜色]

不同方向：border-top:[宽度] | [样式] | [颜色] border-left border-right border-bottom

内边距：padding。不可为负。设置padding值会改变容器的长度。盒子在网页中占的控件，不单单与width和height属性有关，还与padding有关。

内边距属性缩写：

padding：值1;//四个方向都为值1

padding：值1 值2//上下=值1 左右=值2

padding：值1 值2 值3//上=值1 左右=值2 下=值3

padding：值1 值2 值3 值4//上=值1 右=值2 下=值3 左=值4

margin：元素与元素之间的距离。

maigin-top:长度值|百分比|auto 值可为负值。

默认情况下，相应HTML块级元素存在外边距 body h1-h6 p...
声明margin属性，覆盖默认样式

body,h1,h2,h3,h4,p{margin: 0}

margin值为auto，实现水平方向居中显示效果。

垂直方向，两个相邻元素都设置外边距，外边距会发生合并
合并后外边距高度=两个发生合并外边距的高度中最大值。

width和height指的是内容区域的宽高。当我们增加了内边距边框外边距不会影响内容区域尺寸，会影响整个盒子在网页中所占据中的尺寸。

display属性:

inline：元素将显示为内联元素，元素前后没有换行符

block：元素将显示为块级元素，元素前后有换行符

inline-block：行内块元素，元素呈现为inline，具有block相应特性。可以设置高宽padding margin值

none：此元素不会被显示

相应内联元素及使用display：inline设置成内联元素的元素width和height属性无效。水平方向margin-left/margin-right/padding-left/padding-right有效。垂直方向margin-top/margin-bottom/padding-top/padding-bottom无效。
块级元素及使用display：block设置成块级元素的元素width/height/margin/padding属性都生效。

//鼠标经过超链接显示span里的内容 
span{
            display: none;
     }
  a:hover span{
            display: block;/*inline*/
        }

<a href="#">指我。。。<span>和你捉迷藏</span></a>