jsliang 求职系列 - 42 - CSS 基础

时间：2023-03-31 02:18:41 CSS

undefined5、响应式返回目录响应式网页设计（ResponsiveWebDesign）是一个可以兼容多种终端的网站，而不是为每个终端制作一个特定的版本。基本原理是通过媒体查询（@media）检测不同的设备屏幕尺寸进行处理。好处：对某些数据的修改可以自动更新视图，让开发者不需要去操作DOM，有更多的时间去思考和完成业务逻辑。六、离开文档流，返回目录文档流：将表单从上到下分行，每行元素从左到右排列，成为一个文档流，也是一个普通的流。脱离文档流：脱离文档流的元素将不再占据文档流中的空间，而是漂浮在文档流之上。float:left/right:使用后会脱离，但其他框会环绕元素。position:absolute/fixed:absolute即绝对定位，离开文档流后，仍会相对于元素的父类（相对/绝对定位的父类）进行偏移。而fixed则完全脱离文档流，以HTML的形式显示（整个浏览器窗口）。七块级格式化上下文(BFC)返回目录BFC布局规则指的是页面上隔离且独立的容器。容器内的子元素不会影响容器外的元素，容器外的元素也不会影响容器内的元素。特点：在BFC中，盒子从上往下依次垂直排列。框的垂直距离由边距决定。属于同一个BFC的两个相邻框的边距会重叠外边距问题

这段代码生成的页面，其边距为200px，需要BFC解析。主要目的：清除元素内部的浮动。overflow:hidden解决了margin合并的问题。创建2个不同的BFC，所以不会出现margin重叠生成BFC的条件：根元素htmlfloat:left/rightposition:absolute/fixeddisplay:inline-block/flex/gridoverflow:hidden八盒模型返回目录box-sizing:content-盒子。标准框，总宽度等于：width+padding+border+margin。框大小：边框框。IE框，总宽度等于：width+margin。IE框的宽度包含width、padding和border属性。详细看：jsliang-box模型九链接和@import区别返回目录CSS导入方式有：inline:style属性(style="color:red")inline:style标签()externallink:linktag(import:@import(@importurl('index.css')or@import'index.css')link和@import的区别：link是一个XHTML标签，除了加载css外，还可以定义其他的东西，比如rss；@import属于css的范畴，只能加载css，当link引用css时，会在页面加载时同时加载已加载；@import需要在页面完全加载后加载。link是XHTML标签，无兼容性问题；@import是CSS2.1提出的，低版本浏览器不支持。link支持使用Javascript控制DOM改变样式；但是@import不支持十个递增递减和优雅降级返回目录key不同的是他们关注的内容，以及这种不同导致的工作流程的不同。优雅降级：从一开始就构建完整的功能，然后对低版本浏览器进行兼容。渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后针对高级浏览器改进和添加效果、交互等功能，以达到更好的用户体验。undefinedundefinedundefinedundefined18.2CSS的样式标签位置返回目录页面从上到下加载，当然先加载样式。写在body标签之后由于浏览器是逐行解析HTML文档，当解析完写在末尾（outline或写在style标签中）的样式表时，浏览器会停止之前的渲染，等待加载解析style表格重新渲染后，Windows下IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）。题目19返回目录19.1BFC返回目录如果父元素都是浮动的，父类高度塌陷的问题无法解决：A：给父元素添加clear:bothB：添加overflow:hiddentotheparentelementC:在浮动元素div下方添加一个空白，并添加样式clear:bothD:Setparentelement:after{content:"",clear:both;显示：块；overflow:hidden}答案：B19.2CSS盒模型返回目录根据如下代码，两个div元素的垂直间距为()