码迷,mamicode.com
首页 > Web开发 > 详细

css小回顾

时间:2019-06-03 10:49:56      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:margin   访问   link   content   默认   宽高   并集   display   并且   

1.列举你知道的css选择器
标签选择器,类选择器,ID选择器
并集选择器div.box1--div盒子,并且class为box1的盒子,交集选择器div,p--div和p标签都做设置
div p后代选择器,div>p儿子选择器,div+p毗邻选择器,div~p弟弟选择器
属性选择器[title],属性和值的选择器[title="hello"]--属性值为hello,[title^="hello"]--属性值以hello开头,[title*="hello"]--属性值含有hello,[title$="hello"]--属性值以hello结尾,[title~="hello"]--找到所有title属性(多个值或值以空格分隔)中有一个值为hello
伪类选择器,a标签的"爱恨原则",a:link{}--没有访问过的a标签样式,a:visited{}--访问过的a标签样式,a:hover{}--悬浮在a标签样式,a:active{}鼠标点击时的样式,input:focus{}--input输入框获取焦点时的样式
伪元素选择器p:first-letter{}--p标签中第一个字母,p:before{}--p标签内容前插入内容,p:after{}--p标签内容后面插入新内容

2.分别阐述类选择器和id选择器的作用

类选择器:在一个页面中,类可以是重复的,可用于减少css代码的重复
id选择器:在一个页面中,id是唯一的。

3.如何重置网页样式

取消页面标签中,默认的内边距和外边距
*{
margin:0px;
padding:0px;
}

4.对盒模型是怎么理解的?它们的属性有哪些?

margin:外边距
padding:内边距
width:盒子宽度
height:盒子高度

5.什么是标准文档流?

宏观的将,web页面和ps设置软件有本质的区别。
web网页制作,是个流,自上而下。
ps软件设计想在哪里画图就在哪里画图。

标准亡党流下的围观现象
1.空白折叠现象--换行或多个空格,在页面中显示为一个空格
2.高矮不齐,底边对齐
3.自动换行,一行写不满,换行写
其中float属性和相对定位,会使元素浮动起来,脱离标准文档流。

6.浮动盒子的特点?浮动的好处?如何清除浮动?

float属性会让盒子脱离标准文档流。

浮动特性
1.浮动元素脱标
2.浮动元素互相贴靠
3.浮动元素子围效果
4.浮动元素收缩效果

清除浮动:
    1.给父盒子设置高度
    2.clear:both,给浮动元素后加一个空div,并且该元素不浮动,然后设置clear:both
    3.伪元素清除法,给浮动元素的父盒子,也就是不浮动元素,添加一个clearfix类
    .clearfix:after{
    /*必须要写这三句话*/
    content: ‘.‘;
    clear: both;
    display: block;
}
    4.overflow:hidden,overflow规定当内容溢出元素边框时发生的事。

7.精灵图的好处是什么?

减少页面加载图片的次数

8.定位有几种?阐述一下“父相子绝”定位是怎样理解的?

相对定位,绝对定位,固定定位
“父相子绝”:父亲相对定位,不会浮动,可以固定一个位置。儿子绝对定位,利用其浮动现象,可以设置子元素的位置。

9.什么样的盒子脱离了文档标准流?脱离文档标准流的盒子的特点是怎样的?

浮动的盒子,绝对定位的盒子都会脱离标准文档流
这样盒子的特点:
1.会浮动起来,提升元素层级,

10.z-index的规则是怎样的?

1.z-index值大的,显示在上层
2.从父现象,父亲的z-index值越大,子类即使z-index值小,子类元素也会显示在上层
3.只有设置了定位的元素,才能设置z-index
4.默认的z-index都是0,z-index值相同,在html页面中,设置在后面的会显示在上面

11.display属性值有哪些?分别描述他们的意思?

block:是块元素,单独占据一行,可以设置宽高
inline:行内元素,不会单独占一行,不可设置宽高,但如果设置float或定位,可以设置宽高
inline-block:不会单独占一行,可以设置宽高。

css小回顾

标签:margin   访问   link   content   默认   宽高   并集   display   并且   

原文地址:https://blog.51cto.com/10983441/2404089

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!