选择器 种类与优先级,颜色与长度,显示方式,嵌套模型,盒模型

Posted wrqysrt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择器 种类与优先级,颜色与长度,显示方式,嵌套模型,盒模型相关的知识,希望对你有一定的参考价值。

选择器

1.行间式

2.内联

3.外联

内联

1.标签名 2.别名 3.id

<style>

div {}

</style>

<div>

2.

<style>

.iv {}

</style>

<div class=‘iv>

3.

<style>

#iv {}

</style>

<div id=‘iv>

4!.important优先级最高

颜色

background-color #546857  blue  rgb(0~255, 0~255, 0~255)|rgba(0~255, 0~255, 0~255, 0~1)

长度

em px mm cm vw rem

 

 

display

inline

支持部分css长宽由文本撑开

在一行

 

block

异行显示

支持全部css

nline-block;
/*
1.同行显示
2.支持所有css样式
3.设置了宽高就采用设置的值

html中显示模式分为块级和行内,其中常用的块级有:div,p,h1~h6,ul,li,dl,dt,dd...  常用的行内有:span,font,b,u,i,strong,em,a,img,input,其中img和input为行内块元素

 

嵌套关系

inline只可以套inline 

block可以inline但是hn和p 建议inline

inline-block 建议inline套block的话默认文本对齐

结果:
1.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline
2.inline-block可以嵌套其他类型标签, 但一定要结合vertical-align属性操作, 左右还有一空格间距
3.block任何同行显示 ???

 

盒子模型

margin  border padding  content

margin , , , ,上右下左 不足取对边

border solid| dashed点划线|dotted 圆点线             3px   blue

padding  , , , ,上右下左不足取对边

content   width   height   

如果建立父子盒子,必须将父 通过border定死 或者padding设值 否则 父随子 在设定margin 时取最大值向下移动,然后父子上下粘连、

 








以上是关于选择器 种类与优先级,颜色与长度,显示方式,嵌套模型,盒模型的主要内容,如果未能解决你的问题,请参考以下文章

css基础 盒子模型border边框marginpaddingCSS分组和嵌套选择器Display(显示) 与 Visibility(可见性)Position 定位

CircleImage 在选择器中选择一个选项并添加到列表后不断改变颜色

CSS基础

选择器优先级 与 4中引入样式方式

CSSCSS2和CSS3选择器总结(全部选择器种类及其优先级)

CSS选择器