westenboy的专栏

Margin:完全透明的外边框Border:中间的填充部分，受盒子的背景颜色影响Padding:内边框，受盒子的背景颜色影响Content:盒子的内容，显示文本和图像元素的总宽度：width+2*(Margin+Border+Padding)元素的总高度：height+2*(Margin+Border+Padding)

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：@media screen { p.te

CSS3中属性的透明度是 opacity悬停效果：img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}I

div.img{ margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center;} div.img img{ display: inline; margin: 3px; border: 1px solid #ffffff

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}li { float: left;}li a, .dropbtn { display: inline-block; color: whit

CSS伪元素是用来添加一些选择器的特殊效果。段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：:before 伪元素：":before" 伪元素可以在元素的内容前面插入新内容。:after 伪元素：":a

CSS伪类是用来添加一些选择器的特殊效果。在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：first - child伪类：p:first-child{color:blue;} I am a strong man.I am a strong man.匹配所有 元素中的第一个 元素：

组合选择符说明了两个选择器直接的关系。后代选取器：子元素选择器：相邻兄弟选择器：普通相邻兄弟选择器：

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。（1）右浮动：一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：

Fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动：Relative：相对定位元素的定位是相对其正常位置：Relative：可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变：Absolute：绝对定位的元素的位置相对于最近的已定位父元素，

块元素是一个元素，占用了全部宽度，在前后都是换行符。块元素的例子：内联元素只需要必要的宽度，不强制换行。内联元素的例子：但是可以可以更改内联元素和块元素：inline:block:

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。visibility:display:none可以隐藏某个元素，且隐藏的元素不会占用

1、Viewport：viewport 是用户网页的可视区域。一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：2、网格视图：响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。创建响应式网格视图：首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-bo