HTML&&CSS复习(四)_css hegiht:0-CSDN博客

本文链接：https://blog.csdn.net/m0_66208334/article/details/122425356

盒子模型

盒子三大部分：

盒子壁 border

内边距 padding

盒子内容 width+height

外边距 margin+border+padding+（content=width+height）

选择器

父子选择器/派生选择器(标签 class 都可以)

<div>

</div>

div span{background-color: red;}

直接子元素选择器(只有直接的元素)

div > em{

background-color: red;}

<div>

</div>

并列选择器(一样时后面覆盖前面的的)

div.demo{background-color: red;}

分组选择器

.d1{background-color: red;}

.d2{background-color: green;}

.d1,.d2{

Width:100px;

Height:100px;

}

CSS 样式

div{

width:0px;(设置宽)

hegiht:0px;(设置高)

//块级元素,可设置高宽

font-size:1.5em;（当前字体的的1.5倍）

font-size：50px;(设置字体高)

font-weight: bold;（字体粗体）

font-style:italic;(斜体样式)

font-family:arial;(字体样式)

color:red;（字体颜色）

border:1px solid（实线） black;(粗细展示形式颜色)

border-left/top/right/bottom-width/style/color(可以分别设置边框样式)

text-align:left;（对齐方式）

line-height:20px;(单行字体高度)

text-indent:2em;(首行缩进)

text-decoration:line-through/none/underline/overline;(设置中划线/没有线/下划线/上划线)

cursor: pointer;（光标样式）

line-height=1.2em;(行高)

}

长度单位

1、绝对长度单位
彼此固定，不会因为其他元素的尺寸变化而变化。主要有cm mm Q in pc pt px

相对长度单位
2、指定相对于另一长度的长度。主要有em ex ch rem %和可视区百分比长度单位 vm vh vmin vmax

绝对长度

px:即像素pixel，它是最基础也是最常用的一个长度单位

cm:即厘米， 1cm=37.8px

mm:即毫米，1mm=3.78px

in：即英尺inch， 1in=2.54cm=96px

pt:即点point，1pt=1/72in=1.33px

pc:即派卡，1pc=12pt=16px，派卡是印刷行业的长度单位

相对长度

em:一个字符大小，字符大小在浏览器中默认为16px

rem:相对于根元素HTML的字体大小，我们将HTML字体大小设置为100px，则可以更为方便的计算

%：百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小

关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）

vh:视口高度，默认为视口高度的1%

vw：视口宽度，默认为视口宽度的1%

vmin：布局视口高度和宽度之中值较小的那个的 1/100

vmax：布局视口高度和宽度之中值较大的那个的 1/100

如有需要更详细的内容，可以去这里查看：

CSS中各种长度单位总结 - Jesse131 - 博客园

颜色的设置方式

ransparent 透明色

1、纯英文单词

2、颜色代码（三原色红r00-ff、绿g00-ff、蓝b00-ff）

3、颜色函数rgb（255，255，255）

li{list-style:none;}

list-style 简写属性在一个声明中设置所有的列表属性。

可以按顺序设置如下属性：

list-style-type

list-style-position

list-style-image

list-style-type

设置列表项标记的类型。可能的值

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

list-style-position

设置在何处放置列表项标记。可能的值

inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。