DAY FIVE

信奉者z

已于 2022-09-12 02:22:16 修改

阅读量82

点赞数

文章标签：前端 html javascript

于 2022-06-29 23:48:46 首次发布

本文链接：https://blog.csdn.net/m0_55006160/article/details/125476863

版权

css盒子模型

组成：content->padding->border->margin(物品、填充物、包装盒、盒子与盒子间距)

content：内容区域 width、height

padding-（top、left、bottom、right）：内边距 *px、两个值（上下、左右）、四个值（上右下左）

margin-（top、left、bottom、right）：外边距

			#box{width: 200px;height: 200px;background-color: red;
			border: 10px blue solid;
			padding-left: 30px;
			margin 10px}/* 可以控制位置 */





		<div id="box">
			
		</div>

box-sizing改变盒模型

box-sizing盒尺寸：可以改变盒子模型暂时形态

content-box：width、height->content

border-box：width、height->content、border、padding

			#box{width: 200px;height: 200px;background-color: red;
			border: 10px blue solid;
			padding-left: 30px;
			margin 10px
			box-sizing: border-box;}

盒模型之margin叠加问题

出现在上下margin同时存在的问题（会取上下中值较大的作为叠加的值）

盒模型之margin传递问题

出现在嵌套结构中，只是针对margin-top

给父容器加边框

父元素加padding-top

			#box1{width: 300px;height: 300px;border: 1px black solid;}
			#box2{width: 200px;height: 200px;background-color: red;
			border: 10px blue solid;
			padding-left: 30px;
			margin 10px
			box-sizing: border-box;}/* 可以控制位置 */

css盒子模型之扩展

margin可以左右自适应，不可以上下自适应

宽高不设置的时候，对盒子的影响，会自动去计算容器大小

按类型划分标签

block：块（div、p、ul、li、h1）

1.独占一行 2.支持所有样式 3.不写宽和父容器相同 4.所占区域是矩形

inline：内联(span、a、em、strong、img)

1.挨在一起 2.有些样式不支持width、weight 3.不写宽宽度由内容决定 4.所占区域不一定是矩形 5.内联标签之间有空隙，换行产生

inline-block：（input、select）

			body{font-size: 0;}
			#content{font-size: 16px;}/* 可以去空隙 */

按内容划分标签

按显示划分标签

替换元素：浏览器根据元素的标签和属性，来决定元素的具体现实内容（img、input）

非替换元素：将内容直接告诉浏览器，将其显示出来（div、h1、p）

display显示框类型

display+block、inline、inline-block、none

display:none：不占空间

visibility:hidden：占空间

			div{width: 300px;height: 100px;display: inline;}/* 改变类型 */

标签嵌套规范

ul、li

dl、dt、dd

table、tr、td

p不可以嵌套div

内联不可以嵌套块

特殊：a可以嵌套div

owerflow溢出隐藏

owerflow:

visible默认

hidden：直接隐藏

scroll：上下滚动条

auto：x轴y轴对两个轴设置滚动条

			div{width: 300px;height: 300px;overflow-x: auto;}

透明度与手势

opacity：0(透明)~1（不透明）、1.5半透明

占空间、所有子内容会透明

rgba（）：0~1

可以让指定样式透明

cursor手势

defaul:默认箭头

实现自定义手势：.cur、.ico（cursor: url(./EI.ico),auto;）

			#div1{width: 300px;height: 300px;overflow-x: auto;
			opacity: 0.5;}
			#div2{background: rgba(255,0,0,0.5);}/* 不针对文字 */
			#div3{cursor: url(./EI.ico),auto;}

最大最小宽高

min-width、max-width

min(max)-height

%单位：以父容器进行换算

			div{width: 200px;min-height: auto;}





			html,body{height: 100%;}/*高度自适应浏览器*/
			.contrainer{height: 100%;}

css默认样式

body->margin 8px

h1->margin 上下 21.44px

p->margin 上下 16px

ul->margin 上下 16px padding 左40px

css重置样式

*{margin: 0;padding: 0;}

ul{list-style: none;}

a{text-decoration: none;color: aliceblue;}

img{display: block;}

问题的现象：图片跟容器底部有一些空隙

内联元素的对齐方式是按照文字极限对齐的，而不是文字底线对齐的

img{vertical-align: baseline;}；极限对齐方式，默认值

解决方式：img{vertical-align: baseline;}

        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        a{text-decoration: none;color: #666666;}
        img{display: block;}
        h1,h2,h3,h4,h5,h6{font-size: 16px;font-weight: normal;}