HTML+CSS学习笔记 06

2020-06-29  本文已影响0人  langlangjinjin

一. 元素类型

1.1 元素类型的划分方式

1.2 元素类型的总结

image.png

1.3 CSS属性 --- display

1.4 CSS属性 --- visibility

visibility可以控制元素的可见性,有两个常见的取值

visibility:hidden和display:none都是让元素隐藏,有什么不同?

1.5 CSS属性 --- overflow

overflow属性用于控制元素内容溢出的处理方式,常用取值如下

注意:

1.6 元素之间的空格

1.7 元素之间的嵌套规范

二. 盒子模型

2.1 盒子的概念

HTML中每一个元素都可以看作是一个盒子,都有自己的盒模型

2.2 盒子模型 (box model )的几个重要属性

默认盒子模型图示

image.png

浏览器开发者工具的盒模型

image.png

2.3 内容相关属性

2.4 内边距

2.4.1 内边距相关属性

2.4.2 padding的取值规律

代码示例

div {
    padding:10px 20px 30px 40px;
}

/* 等同于 */

div {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:30px;
    padding-left:40px;
}


div {
    padding: 10px 20px 30px;
}
/* 等同于 */
div {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:30px;
    padding-left:20px;
}

div {
    padding:10px 20px;
}

/* 等同于 */
div {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}

div {
    padding:10px;
}

/* 等同于 */

div {
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
}

2.5 外边距

2.5.1 外边距的相关属性

2.5.2 外边距的取值规律

代码示例

div {
    margin:10px 20px 30px 40px;
}

/* 等同于 */

div {
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;
}


div {
    margin: 10px 20px 30px;
}
/* 等同于 */
div {
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:20px;
}

div {
    padding:10px 20px;
}

/* 等同于 */
div {
    marign-top:10px;
    margin-right:20px;
    margin-bottom:10px;
    marign-left:20px;
}

div {
    margin:10px;
}

/* 等同于 */

div {
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
}

2.5.3 外边距的上下传递问题(对象是父子元素)

2.5.4 外边距的上下折叠问题(对象是兄弟元素)

2.6 border(边框)

2.6.1 边框的相关属性

2.6.2 边框样式(border-style)的取值

2.6.3 边框的形状

image.png

2.7 行内非替换元素的注意点

2.8 边框圆角 (border-radius)

2.8.1 CSS属性 ---- border-*-*-radius

2.8.2 CSS属性 ---- border-radius

border-radius是一个缩写属性

2.9 CSS属性 --- outline

2.10 CSS属性 --- box-shadow

2.11 CSS属性 --- text-shadow

2.12 CSS属性 --- box-sizing

2.12.1 box-sizing的定义

2.12.2 box-sizing的取值

2.12.3 box-sizing:content-box

2.12.4 box-sizing: border-box

image.png

2.13 元素的水平居中显示

在一些需求中,需要元素在其父元素中水平居中(父元素一般是block元素或者是inline-bloc元素)

三. background背景的使用

3.1 background-image

3.2 background-repeat

3.3 background-size

3.4 background-position

3.4.1 background-position的基本认识

3.4.2 CSS Sprite (雪碧图/精灵图)

3.5 background-attachment

3.6 background的复合写法

background是背景一系列的复合写法,其常用格式是

image position/size repeat attachment color

注意:

3.7 background-image和img的选择

3.8 CSS属性 --- cursor

上一篇 下一篇

猜你喜欢

热点阅读