CSS盒子

Posted 2022-10-29 zx125

CSS元素

元素分类和区别

常用的块状元素有：

<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form>

常用的内联元素有

<a>、<span>、<i>、<em>、<strong>、<label>

常见的内联块状元素有

<input>、<img>

区别

标签类别	特点
块状元素	1.独自占据整一行 2.可以设置宽高（默认是父标签的100%）
行内元素	1.所有的内联元素在一行内显示 2.不可以设置宽高
行内块元素	1.在一行内显示 2.可以设置宽高

盒子模型

padding(内填充)

#单个方向设置
padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;

#四周设置
padding:100px
padding: 5px 10px 15px 20px;

border(边框)

边框三要素:粗细 线性样式 颜色

/*1像素实线且红色的边框*/
border: 1px solid red;

border-width:1px 2px:
border-top-width:2px;

/*上：实现  右：点状  下：双线 左：虚线*/
border-style: solid dotted double dashed;

border-color:red;

清除默认边框

border:none;
border:0;

input清除样式

border:0;
#清除外线
outline:none;

margin(外边距)

特点

水平叠加，垂直合并

margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;

/*推荐使用简写*/
margin: 5px 10px 15px 20px;
/*顺序：上右下左*/

/*常见的居中*/
margin: 0 auto;

清除默认外边距

margin:0

常见属性

display

用于控制html元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合javascript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display与line-height

一般用于a标签和span标签

文字垂直居中

display:inline-block;
height:40px;
line-height:40px;

line-height是行高 height是高度 字体的行框高度是根据字体的font-size决定