css样式总结

块级元素与行内元素

• 块级（block-level）；行内（内联、inline-level）。
• 块级元素包含块级和行内，行内元素只能包含文本和行为。
• 块级占据一整行空间，行内占据自身宽度空间。
• 宽度设置，内外边距的差异。
• 块级元素：div、h1-h6、p、hr、form、ul、ol、pre、table、li、dd、dt、tr、td、th.
• 行内元素：em、strong、span、br、a、img、button、input、label、select、textarea、code、script.
• 在一行里面可以放很多行内元素，除非放不下才会折行。

宽度：

1. 宽度高度只对块级元素设置生效，对行内元素设置无效。
    
2. 对于元素一般不设置高度，高度会自动撑开，满足需求，如果设置高度，会出现高度不够，溢出的现象。

边框：不继承

border-width;border-color;border-style;简写boeder: 1px solid red;
border-style:solid(dotted、dashed)
只想设置一个方向的边框：
border-bottom:none没有下边框
border-top:1px solid red;只有上边框

• 圆角：
  border-radius:10px;
border-radius: 10px 8px 0 0 ;
  如果想变成一个圆形，只要让border-radius的值大于等于width的一半就可以了。或者值为100%或者50%。比较方便，不需要计算。

 

边距：

• 盒模型：用于描述当前元素属性的一个盒子。

   

  

  1.png

• padding：代表内边距，有四个方向的值，可以合写，值可以是数值也可以是百分比性（相对于父容器，不是自身）。不继承。
  padding-top;padding-right;padding-bottom;padding-left
• margin：代表外边距，有四个方向的值，可以合写，值也可以是百分比（相对于父容器，不是自身）。还可以是负值。不继承。

1. 外边距存在合并问题。
   2.对于块级元素，设置 margin: 0 auto:可达到居中的目的。 不能有浮动定位等东西。并且width设置成定值才可以使用，因为不设置的时候，宽度是自动充满整个屏幕的。
2. 对于行内元素，设置text-align:center：可达到居中的目的。
3. *{margin:0;padding:0;}对于多有的元素内边距与外边距都设成0，因为页面有很多默认样式，清除页面的默认样式（user agent stylesheet ）。

• 对行内元素，上下的margin,padding是没有效果的，只有左右的margin和padding才有效果。padding的上下只是用来撑开边框和背景色，但元素内容占据的高度是不变的，不会改变其下元素的位置空间。
  所有的元素都可以设置，不是继承属性。

• 块级：block,list-item.table。
• 行内：inline,inline-block,inline-table。

font

• font-size:字体大小。
• font-family:字体，宋体，微软雅黑，Arial等。
• font-weight:文字粗度，常用的就是默认值regular和粗体bold。
• line-height:行高，可以用百分比，倍数，或者固定尺寸，文字所占据的垂直空间。
• 以上属性都可以继承给子元素。
   

1. fon-family：使用浏览器打开页面时，浏览器会读取HTML文件进行解析渲染。当读到文字时会转换成对应的unicode码（可以认为是世界上任何一种文字的特定编码）。再根据HTML里设置的font-family（如果没有设置则使用浏览器默认样式设置）去查找电脑里（如果有自定义字体@font-face，则加载对应字体）对应的字体文件。找到文件后根据unicode码去查找绘制外形，找到后绘制到页面上。
2. 不是想设置成什么样子的字体就会渲染成什么样子的字体，要看用户的电脑字体库里面有没有这个字体。
3. 英文的字体库很漂亮，中文的字体太多，没有那么多样式。
4. font-family的写法：在css中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8等）不匹配时会出现乱码。保险的方式是将字体名称用unicode来表示。

宋体 | SimSun | \5BBB\4F53黑体 | SimHei | \9ED1\4F53微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

*打开控制台escape（'微软雅黑'），把%u替换成*

1.png

 

1. chrome最小字体：chromemore字体大小是16px，最小字体是12px，设置小于12px的字体不生效。解决方案：使用CSS3的放大和缩小-webkit-transform: scale(0.75)：缩小到原来的）0.75倍。

文本

• text-align：文本对齐方式left、center、right、justify。
• text-indent：文案第一行缩进距离。
• text-descoration：none、underline、line-through、overline、。
• color：文字颜色。
• text-transform：改变字体文字大小写none、uppercase、lowercase、capitalize。
• word-spacing：可以改变字（单词）之间的标准间隔。
• letter-spacing：字母间隔修改的是字符或字母之间的间隔。
• 行内元素居中：text-align: center;。

颜色

• 单词：red、blue、pink、yellow、white、black。
• 十六进制：#000000黑色；#fff白色；#eee；#ccc；#666；#333；#f00；#0f0；#00f。
• rgb：rgb(255,255,255)；rgb(0,255,0)。
• rgba：rgba(0,0,255,0.5)。a为颜色的透明度。数值越小，透明度越高。

单位：

• px：固定单位。
• 百分比：宽高，文字大小，line-height，position。
• em：相对单位，相对于父元素字体大小。
• rem：相对单位，相对于根元素（html）字体大小。
• vw vh：相对单位，1vw位屏幕宽度的1%。（具有兼容性很差。caniuse.com）

a链接设置颜色：

a有默认颜色和样式，会覆盖继承的样式。

a { color: red; text-decoration: none;}

对a链接的父元素设置color，a链接不能继承其父元素的color属性，因为浏览器的默认样式会覆盖掉从父元素继承过来的color。继承生效了，但样式被覆盖。

列表去掉点：

ul {list-style: none;}或者li {list-style :none;}因为样式的继承，给ul设置样式，子元素li会继承他的样式。

隐藏or透明

• opacity:0;透明度为0，整体。
• vissibility:hidden;：和opacity:0;类似，消失了位置还在。
• display:none;消失，不占用位置。
• background-color:rgba(0,0,0,0.2)：只是背景色透明。
   

背景：页面想加一个背景图片。

• background：简写属性，作用是将背景属性设置在一个声明中。
• background-attachment：背景图像是否固定或者随着页面的其余部分滚动。默认情况下滚动。
• background-color：设置元素的背景颜色。
• background-image：把图像设置为背景。
• background-position：设置背景图像的起始位置。
• background-repeat：设置背景图像是否以及如何重复。
• background-size：设置背景的大小（兼容性）。

1. background-position：默认左上角。
   x y / x% y% / [top | center | bottom ] / [left | center | right]
2. background-repeat
no-repeat：背景图片在规定位置。
   repeat-x：图片横向重复。
   re[eat-y：图片纵向重复。
   repeat：全部重复。
3. background-size：拉伸图片。
   100px 100px | contain | cover
4. 页面即设置了背景色又设置了背景图片：如果图片很小，图片是覆盖在背景色上面的，除去图片的部分都是背景色；如果图片是png格式的，是透明的，背景色就会从透明的地方透出来。
5. 图片是背景图片，相当于元素是一个窗口，图片是后面的风景，窗口没有，风景也看不出来。比如div元素设置宽高就是创建一个窗口。
6. 对于行内元素，设置margin padding对于元素的背景色和边框是有效果的，只是元素本身的位置不发生变化。
7. 设置宽度和高度是对元素进行设置的，但是设置background-size是对背景图片设置其大小。
8. background-size的属性值为：contain图片和窗口的比例不同，设置contain图片会对应窗口进行一个等比的缩放。cover图片的高度会充满窗口，但是左右不会。
   一定要把容器撑开。

 

隐藏OR透明

• opacity:0：透明度为0.
• visibility: hidden：和opacity:0类似。
• display:none：消失，不占用位置。
• background-color: rgba(0,0,0,0.2)：只是背景色透明。

inline-block

• 即呈现inline特性（不占据一整行，宽度由内容宽度决定）。
• 又呈现block特定（可设置宽高，内外边距）。
• vertical-align是和行内元素和表格绑定到一起的。

line-height：用于设置单行文本的行高。可以被继承。

• line-height：2:相当于本身文字的高度的两倍,就算是继承的，也是本身的两倍。
• line-height:100%:是他父元素文字高度的2倍。若是继承的话，则是直接是父元素的200%。
• height = line-height来垂直居中单行文本

区别：

• W3C标准中padding、border所占的空间不再weight、height范围内。俗称的IE盒模型width包括content尺寸+padding+border。
• 添加!doctype使用标准盒模型，width = content.
• box-sizing: content-box：W3C标准盒模型。
• box-sizing: border-box:IE盒模型。