内容简介关于CSS，确实太复杂了，内容也很多。写的不容易，基本上就是这个调子。CSS怪癖大家一定听说过。我没有深入了解这个。我只是在谈论普通效果。我基本没问题。之前学CSS的时候，也觉得很累。我意识到设计不当和对CSS属性的不了解导致了一个牵一发而动全身的恐怖事件！！，糟糕的！！只要稍微改动一下，可能整个页面就会乱七八糟。之前在百度前端技术学院做过一个任务，让我意识到了这一点，不过那是之前的事情，后面写的页数更多。看别人总结的经验，渐渐明白CSS应该怎么写。如果你研究过Bootstrap的源代码，那么你的CSS肯定不会差。后面也会研究BT的源码，到时候再更新。这篇文章是关于CSS入门的核心内容。只要学会这个，CSS就大致固定了，那你还扯什么？我分以下几个部分来讲解：tips::下面的例子都是基于谷歌浏览器的。外边距（margin）内边距（padding）继承特性（inherit）标准文档流（normal）浏览器默认样式（useragentstylesheet）布局（layout）定位（position）样式级联（优先选择模式）通过复习学习新东西过去，老师的洋filler(margin)可以学css，盒子模型你一定要知道！！看下面的代码：（下面的代码，浏览器是没有默认样式的）大家立马就知道页面应该是什么样子了，但是肯定有一些地方让你误解了。一起来看看，先看看整体效果：嗯，和我想的一样，再来看一个的盒子模型：可以看到盒子一个的周围有一个20px的间隔，就是margin，也就是说，我周围20px范围内什么都不允许！！其实盒子二的盒子模型是一样的，所以我们很容易理解整体的效果。我们现在知道了margin是作用于siblingelements的，也就是说在同一个level，我的margin就是我的保护区，不管你是谁，都不允许靠近我的保护区，你只能站在外面但是，下面你可能不知道这一点，但是你可以看到我们的代码有一个共同的父母一和二。我们可以看到左边也有20px的距离！明白了吧，其实对于父元素来说，margin只在水平方向起作用，在垂直方向不起作用，所以，你有没有体会。改了子元素的margin-top，抱草了，整个布局乱了，所以，父元素的top紧贴着子元素。还有一点就是body的box模型和container是一样的。然后分析一下，看下面：咦，为什么这里的顶部有20px？不是说没用吗？,其实这是html的盒模型，浏览器的默认样式下面会讲到，html默认是没有margin和padding的，也就是说所有的内容都是20px的margin-top在contentareahtml虽然没有对父元素起作用，但是它让父元素的父元素body的margin-top为20px，这点很重要。margin的本质有个属性，就是不重叠，取最大！还是上面的例子，如果我把容器的margin-top设置为20px，不会有任何变化，为什么呢？因为container和body是父子关系，按照上面的说法，两个top一直是相互依附的。如果你把容器的margin-top设置为20px，那么就已经有20px的间距了。如果您设置相同的值，它当然不会改变。如果你设置为30，它会向下移动10px，这是一个特性。内填充（padding）上面说了外填充，这里说的是内填充。其实，内衬也没什么难的。但是，很多人会掉进坑里。写CSS的时候不注意，很容易掉坑里。简单写东西要花很长时间，因为不明白它们的特殊性。innerpadding和outerpadding都需要了解box模型，所以我们已经看到了outerpadding中的box模型，还有padding、margin、content、border。看一下我改的代码：一次发了三张图片。什么是填充？羊毛布？说白了，就是亲子关系。只有亲子关系。对于所有设置了padding的元素，里面的内容只能写在box的padding中。一般使用这个属性，内容区域和边框有一定的规则间隔，padding最合适。注意此时盒子一的总尺寸不是120*120，而是140*140，这是一个坑！！总结一下：padding是针对父子的，父元素设置padding，子元素不排列在上边缘，而是和父元素的border有一段距离。tips:这里要注意一点，你设置的宽高是不包含padding的，所以一旦你设置了宽高，在设置padding的时候一定要注意，可能会打乱布局，我们应该加上box-sizing：border-box，这里width包括padding，仔细观察盒模型最后得出结论：标准盒模型，盒浏览器占用的总宽度是这样计算的：border+padding+content（你设置的宽度，height是内容的宽度）标准文档流下，一个框占据浏览器的位置：margin+border+padding+content（即这些区域不能被其他元素占据）继承特性（inherit）继承特性，这个很难说的很详细，但是要想写好CSS，不仅要懂继承，还要用好继承，这样在写CSS的过程中可以简化很多代码。现在再看我之前写的CSS代码，都是垃圾，都是堆砌的代码，惨不忍睹。继承是指包裹在里面的标签会拥有外层标签的样式，即子元素可以继承父元素的属性。例如，以下代码在div中包含2个p标签和1个span标签。当给div设置字体颜色为红色时，它的子标签会继承父元素的属性，所以会显示红色。CSS中以text-、font-和line-开头的属性都是可继承的。CSS中有很多属性是可以继承的。注意继承必须继承父元素的样式！！这里我列出了可以继承的属性和不能继承的属性。不可继承：显示、边距、边框、填充、背景、高度、最小高度、最大高度、宽度、最小宽度、最大宽度、溢出、位置、左、右、顶部、底部、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素继承：可见性和光标。行内元素可以继承：letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-转变，方向。接线端子元素可以继承：text-indent和text-align。列表元素可以继承：list-style、list-style-type、list-style-position、list-style-image。示例：a标签的字体颜色不能被继承。比如将上面代码的div标签中的代码改成下面的代码后，a标签的字体颜色不会改变。可以在页面中通过F12查看。a标签有一个默认颜色：-webkit-link；fontcolor属性，所以为父元素设置颜色不会改变a标签字体的颜色，h标签字体的大小也不会被继承。下面的代码为父元素设置了一个字体属性20px，在div中添加一个h2标签，可以发现h2标签中的字体大小在浏览器中不会发生变化，因为h2标签也有默认的默认字体-尺寸：1.5em；fontsize属性，div标签的高度如果不设置为由内容决定（没有内容高度为0），默认继承父元素的宽度。下面的代码很好的演示了div的宽高。在每个div标签后面加一个br标签强制换行，因为如果不使用br标签强制换行的话，div会紧靠在一起，看不到div的高度。第一个div因为没有内容在浏览器上显示不出来，第二个div里面加了一句，但是高度是靠里面的内容支撑的。第三个div也包含了一句话，内容中用了一个br标签强制换行，所以你会发现div的高度会比第二个div的高度要高。如果继续向div标签添加内容，高度会相应增加。a元素涉及浏览器的默认样式。下面会讲默认样式标准文档流（普通）块级：占一行，不管多大，我占一行，占一行，谁也不能再占我的行，设置宽高扮演一个角色。占满一行后，不够一行的位置用margin代替。如果这一行不够一整行，我会另起一行。rowlevel:多大，多大，有空位我就拿，设置这种label的宽高是不行的，每个row-levellabel都有默认间隔，不能取消规则：无论怎么占用，已经占用的位置，一定不能被浏览器的默认样式（useragentstylesheet）占用。每个标签都有默认的样式，比如标签，默认蓝色，下划线，img标签默认有边框，p,ulli,dt,dd标签有默认的Margin或者padding什么的，H1~H6标签字体形状和大小，都会有它的默认样式是html，而bodyhtml的默认样式width:browserwidthheight=8pxpadding0,margin0border0bodyheight:0width:browseWidthpadding0margin8pxborder0看一段代码：你可以看到默认的样式是这样的！标签的默认样式还有很多，这里就不一一举例了。经常阅读它们后，您可以记住它们。每个浏览器的行为可能不同。布局（布局）显示：无|行内块|内联|块|可见性：可见|隐藏|collapsofloat：左|rightclear:左|对|bothoverflow：隐藏的scorll|我是飘起来的，在空中，其他元素当我不存在并设置浮动时，宽度不再默认为父元素的宽度（所有浮动元素都是按顺序排列的，位置不够godown)漂浮后，父元素塌陷，你可以理解，我在空中，我在最上面一层，我是最外层，别人代替了我，但是只显示了我，因为我是最外层。看了这个布局，你就明白了，问几个问题：div是快级元素，为什么要和boxone站在一起？不是说块级元素必须占一行吗？如果两个框的宽度都没有设置，那么宽度就是100%，也就是body的宽度。为什么它不会溢出身体容器？当你真正明白的时候，我提的问题都不是问题！了解布局，你可以处理任何页面！clear：清除浮动，后面的元素会忽略前面设置为浮动的元素，常用于受浮动影响的元素（我们不希望他受到影响）。其实前面的元素是浮动的，后面的同级元素肯定会受到影响的，如果同级元素不存在，那肯定是从浮动元素的位置开始排列的。肯定是有影响的，父元素的高度塌陷，影响布局，所以一定要考虑周全，深入了解特性。overflow:overflowhiddenoverflow-x/-y隐藏tips:overflow属性在水平或垂直方向，一般不需要高于祖先元素，其继承特性非常危险！！！定位（position）大家都说定位难，定位是为了什么？定位的用处在于你需要精确控制元素的位置。对于特殊的位置，当普通文档流和布局不确定时，需要使用position:static(default)|相对|绝对|fixedelementabsolute:绝对定位，定位？通过谁？（如果父元素不存在，则定位元素相对于html定位）如果父元素有非静态定位元素，则按照就近原则定位。一旦定位，就会有一个新层（脱离文档流），该层的最上层是相对的：relativePositioning，不脱离文档流，占用位置，相对于其原来的位置定位fixed：固定定位，相对于浏览器窗口定位，不随内容改变，只固定在窗口位置z-index:(int)number改变图层，用于定位元素（非静态）top,right,bottom,left:pxpercentage只用于定位元素（非静态定位），移动端定位那么多内容，这些应该比较容易理解，在应用中可能会比较混乱是的，哈哈，对于初学者来说，都是这样的样式级联（首选样式).有几种引入样式的方法。嵌入、内部样式表、外部样式表、默认样式、继承样式嵌入：写在标签内部样式表：是直接写在页面上的外部样式表：是以链接形式引入的默认样式:也叫浏览器给定的(useragentstylesheet)Inheritedstyle:继承父元素的样式Diagram:记住规则:NearbyPrinciple,Embedded>InternalStyleSheet>ExternalStyleSheetDefaultStyle>InheritedStyle(两种样式是最低层）其他属性其他属性，遇到难理解的时候，重点说一个，属性太多了，有的很简单，没必要记录，但是我觉得对于移动端布局还是很重要的。想看移动端布局CSS的可以看我的文章：【HTML+CSS入门CSS3移动端布局】()CSS参考手册：推荐这个网站不错：CSS参考手册_WEB前端开发参考手册系列
