css基础常见问题

1、行内元素，行内块元素，块元素，都有什么，例子，特点

块元素:一行只能放一个块级元素，可以设置宽度高度，默认宽度是容器的100%，
常见的块元素
address – 地址、blockquote – 块引用、center – 举中对齐块、dir – 目录列表、div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表、fieldset – form控制组、form – 交互表单
h1 – 大标题、h2 – 副标题、h3 – 3级标题、h4 – 4级标题、h5 – 5级标题、h6 – 6级标题
hr – 水平分隔线、isindex – input prompt、menu – 菜单列表、noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）、ol – 有序表单、p – 段落、pre – 格式化文本、table – 表格、ul – 无序列表

行内元素:一行可以放多个行内元素，不可以直接设置宽度高度，默认宽度是本身内容的宽度
常见的行内元素
a – 锚点、abbr – 缩写、acronym – 首字、b – 粗体(不推荐)、bdo – bidi override、big – 大字体、br – 换行、cite – 引用、
code – 计算机代码(在引用源码的时候需要)、dfn – 定义字段、em – 强调、font – 字体设定(不推荐)、i – 斜体、img – 图片、input – 输入框
kbd – 定义键盘文本、label – 表格标签、q – 短引用、s – 中划线(不推荐)、samp – 定义范例计算机代码、select – 项目选择
small – 小字体文本、span – 常用内联容器，定义文本内区块、strike – 中划线、strong – 粗体强调、sub – 下标、sup – 上标
textarea – 多行文本输入框、tt – 电传文本、u – 下划线

行内块元素:一行可以放多个行内块元素，可以设置宽度和高度，默认宽度是本身内容的宽度，
常见的行内块级元素有
img|input|select|textarea|button

2、都有什么选择器，优先级，权重

标签选择器、类选择器、id选择器、通配符选择器、伪类选择器、后代选择器、交集选择器、并集选择器
优先级:!important>id选择器>类选择器>标签选择器>通配符选择器>浏览器自定义或继承
内联样式1000、id选择器100、类选择器，伪类选择器10、标签选择器，伪元素选择器1、通配符0

3、都有什么和文字相关的属性

属性	描述
font-size	大小
font-family	字体
font-weight	字体粗细
font-style	字体样式
color	文本颜色
text-align	文本水平对齐
line-height	行间距
text-indent	首行缩进
text-decoration	文本装饰

文字简写

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

4、和背景相关的属性

属性	描述
background-color	背景颜色
background-image	背景图片
background-repeat	背景平铺
background-position	背景位置
background-attachment	背景附着（背景是滚动还是固定）
background:rgba(0,0,0,0.5)	背景透明

背景简写

background: transparent url(image.jpg) repeat-y  scroll center top ;
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

5、什么是盒模型，

盒模型是CSS中重要的概念。虽然CSS中没有盒模型这个属性，但它却是CSS中无处不在的，盒模型是由margin、border、padding和content几个属性组合形成的。

6、margin，padding，每个值代表什么意思

margin:10px 10px 10px 10px;上、右、下、左
margin:10px 10px 10px;上、左右、下
margin:10px 10px;上下、左右
margin:10px;上下左右
padding同理

7、什么是合并塌陷，怎么解决

嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框 父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者
解决方案：

可以为父元素定义上边框。 2. 可以为父元素定义上内边距 3. 可以为父元素添加overflow:hidden。

8、浮动有什么属性，为什么浮动，怎么清除浮动

float:none;元素不浮动（默认值）
float:left;元素向左浮动
float:right;元素向右浮动

页面布局的时候子元素不浮动的时候会撑起父盒子的高度，如果浮动了父盒子的高度为0，对后面的页面布局造成 影响，所以需要清除浮动。
额外标签法(隔墙法）、父级添加overflow:hidden、使用after伪元素清除浮动

9、什么是定位，参照点是什么，怎么写

position:static; 静态定位，无定位，默认定位方式
position:relative; 相对定位，参照原来在标准流中的位置
position:absolute; 绝对定位，参照有定位的父元素
position:fixed; 固定定位，参照整个浏览器定位

10、css3有什么属性

1、边框阴影

box-shadow:10px 10px 30px #000; 
box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

2、边框圆角

border-radius:50%; 

3、过度

transition:all 1s; 
transition: property duration timing-function delay;

值	说明
transition-property	指定CSS属性的name，transition效果
transition-duration transition	效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

4、2D转换

transform:rotate(30deg) 
transform: none|transform-functions;

11、css什么属性可以继承

属性	说明
font	字体系列属性
text	文本系列属性
line	行高
color	颜色

一、有继承性的属性

1、字体系列属性

font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

3、元素可见性

visibility

4、表格布局属性

caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性

list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性

quotes

7、光标属性

cursor

8、页面样式属性

page、page-break-inside、windows、orphans

9、声音样式属性

speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、
stress、richness、、azimuth、elevation

二、所有元素可以继承的属性

1、元素可见性：visibility
2、光标属性：cursor

三、内联元素可以继承的属性

1、字体系列属性
2、除text-indent、text-align之外的文本系列属性

四、块级元素可以继承的属性

1、text-indent、text-align

12、display属性值，什么意思

属性：值	描述
display:none;	此元素不会被显示
display:block;	此元素将显示为块级元素，此元素前后会带有换行符
display:inline;	默认。此元素会被显示为内联元素，元素前后没有换行符
display:inline-block;	行内块元素。（CSS2.1 新增的值）

13、input的type属性值

属性=值	描述
type=“password”	密码字段
type=“radio”	单选按钮
type=“checkbox”	复选框
type=“submit”	提交按钮
type=“button”	创建按钮

14、css样式引入方式区别，优先级

行内式（内联样式）
内部样式表（内嵌样式表）
外部样式表（外链式）
行内式>内部样式表>外部样式表

15、display:none与visibility:hidden;

display:none;
隐藏后占用的空间消失，不再影响页面布局，如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，有回流
visibility:hidden;
隐藏后占用的空间不会消失，仍然影响页面布局，visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。
但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别，无回流
visibility: hidden不会影响计数器的计数，这和display: none完全不一样，

16、四个伪类元素，顺序，意思

属性	描述
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标滑过的链接
a:active	已选中的链接