html及css

在网上看到的，记录下来，来源太多了，就不标注了，以便有空翻翻。

html 块级元素和行级元素

块级元素

行内元素

3.块级元素与行内元素的区别
（1）块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。
（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。
4. 块级元素与行内元素的转换
display:inline-block;
display:inline;
display:block;
5.可变元素

CSS样式

1.设置背景色为透明
background-color: transparent;

css设置各种图形https://www.webhek.com/post/40-css-shapes.html

css3为了区分伪类和伪元素，伪元素采用双冒号写法。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

12345645654

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。 content可取以下值：string，attr()，url()/uri()，counter()

使用场景：
1、清除浮动
2、模拟float:center的效果
3、做出各种图形效果
4、不使用图片创建小图标
6、给blockquote添加引号
7、超链接特效
8、::before和::after实现多背景图片

1. inline ： 使用此属性后，元素会被显示为内联元素，元素则不会换行
   inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border

2. block ： 使用此属性后，元素会被现实为块级元素，元素会进行换行。
   block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float

3. inline-block ： 是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。(IE6不支持)
   inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样