关于css碎知识点（2）

9.块级元素盒子内边距属性为padding：padding属性用于设置内边距，即边框与内容之间的距离。！！！注意内边距页会影响盒子的实际大小，会撑大原来的盒子，和边框一个原理。例如：

padding-left: 20px;

这个表示左边内边距为20个像素。内边距的复合写法：

padding:5px:1个值，代表上下左右都有5像素内边距

padding:5px 10px ; 2个值，代表上下内边距为5，左右为10；

padding:5px 10px 15px;3个值，代表上内边距为5，左右为10，下为15；

10.块级盒子外边距属性为margin：外边距的典型应用，外边距可以使块级盒子水平居中：满足条件为盒子必须优宽度，左右外边距都为auto’。例如：

margin: 0px auto;

！！！注意行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。

11.块级盒子阴影属性为box-shadow：属性值为：h-shadow v-shadow blur spread color inset；

(1)属性值h-shadow：必需属性，意思是水平阴影的位置，允许是负值。

(2)属性值v-shadow：必须属性，意思是上下阴影的位置，允许是负值。

(3)属性值blur：模糊距离。

(4)属性值spread：阴影尺寸。

(5)属性值inset：内部阴影。

(6)默认的是外阴影outset，盒子阴影占用控件，不会影响带其他盒子的排列。

12清楚内外边距：格式是在<style></style>标签内添加：

padding: 0px;清除内边距

margin: 0px;清楚外边距

}

注意：行内元素为了照顾兼容性，尽量只设置左右边距，不要设置上下外边距，转化为块级元素就行。

13.外边距合并-嵌套块元素塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距是，此时父元素会塌陷较大的外边距。解决方案：

(1)可以给父元素定义上边框

(2)可以给父元素定义上内边距

(3)可以给父元素添加overflow：hidden

例如：

.father{

width: 400px;

height: 400px;

background-color: blueviolet;

margin-top: 20px;

overflow: hidden;

text-align: center;

}

.son{

margin: 100px 100px;

width: 100px;

height: 100px;

background-color: brown;

}

效果图：

父元素的上外边距是20px，子元素的上外边距是100px。

13.圆角边框属性为border-radius：1-4length| % /1-4length| %;可以定义四个属性值：分别为：左上角，右上角，右下角，左下角。Length是设置的形状，%是弯曲的程度。例如：

div{

background-color: aqua;

width: 500px;

height: 500px;

border-radius: 100%;

}

效果图：四个角都变

14.HTML元素的浮动：网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向找浮动

(1)什么是浮动属性为float：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及及包含另一个浮动框的边缘。属性值包括：none，left左浮动，right右浮动。

(2)浮动的重点！！！：1.浮动元素会脱离标准流，脱离标准普通流的控制移动到指定的位置，俗称脱标，浮动的元素不在保留原先的位置。2.浮动的元素会在一行内显示并且元素顶部对齐。3.浮动的元素会具有行内块元素的特性，任何元素都可以添加浮动，不管原先是什么模式的元素，添加浮动之后具有行内块相似的特性，如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动以后，他的大小会根据内容来决定，以及它的高度。

(3)浮动布局的注意点：1.浮动和标准流的父盒子搭配，先用标准流的父元素排列上下位置，之后内部子元素来用浮动排列左右位置。2.一个元素浮动了，理论上其余的兄弟元素也要浮动，但是浮动的盒子只会对自己造成影响，而且会影响后面的标准流的盒子不会影响前边的标准流盒子。例如：

没有添加浮动属性的俩个盒子：

.one{

width: 200px;

height: 200px;

background-color: aqua;

}

.two{

width: 100px;

height: 300px;

background-color: black;

}

效果图：

然后对.one元素添加浮动属性

.one{

width: 200px;

height: 200px;

background-color: aqua;

float:left;

}

.two{

width: 100px;

height: 300px;

background-color: black;

}

效果图：

下表的标准流会移动到上边添加浮动属性元素的位置。相反下边添加浮动属性上边元素不添加浮动元素则不会出现这种效果。

15.清楚浮动：

(1)为什么要清楚浮动？由于父级盒子很多情况下不方便给高度，都是由子元素撑大的，但是子盒子又是浮动不占位置，最后父级盒子的高度为0时，就会影响下面的标准流盒子。

(2)清楚浮动的本质：清楚浮动的本质是清楚浮动元素造成的影响（就是盒子没有占位置，而且没有高度），如果父盒子本身有高度就不需要清楚浮动，清楚浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流。

(3)清楚浮动的方法：1额外标签法也称为隔墙法，是w3c推荐的做法。

2.父级添加overflow属性。例如：

.box{

background-color: black;

overflow: hidden;

}

3.父级添加after伪元素（后面会说伪元素）。例如：

.one::after{

content: '';

display: block;

height: 0%;

clear: both;

visibility: hidden;

}

4.父级添加双伪元素。例如：

.box::before,

.box::after{

content: "";

display: table;

}

.box::after{

clear: both;

}

.box{

zoom: 1;

}

关于css碎知识点（2）相关推荐

css 小知识点：inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
CSS相关知识点：6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言基本 HTML 标签基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型盒子模型相关知识点 Photoshop 简单使 ...
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
HTML+CSS自用知识点（第四周）
HTML+CSS自用知识点拨云见日篇(续) 三十五.CSS定位 1.relative的相对定位 1.position 2.relative 2.absolute绝对定位 3.fixed固定定位 4. ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
一文梳理总结HTML+CSS琐碎知识点快速上手前端开发
一文梳理总结HTML+CSS琐碎知识点 1 前端三要素 2 HTML 2.1 HTML骨架 2.2 HTML标签的基本概念 2.3 HTML基础标签 2.4 HTML高级标签 2.4.1 列表 2.4 ...
关于HTML的碎知识点
关于HTML的碎知识点 1. <!DOCTYPE html> (1)文档类型声明,作用就是告诉我们浏览器使用哪种HTML版本来显示网页. (2)注意:该标签处于文档中的最前端,不是HTML ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...

关于css碎知识点（2）

关于css碎知识点（2）相关推荐

最新文章

热门文章