笔记_HTML+CSS精选_html text-size-CSDN博客

本文链接：https://blog.csdn.net/html5_mylove/article/details/126232309

如何清除一个标签的子标签的浮动？

清除浮动的几种方法：

父元素有高度，此时就没有浮动的影响了

父元素如果不愿意设置固定死的高度，而是自动适配，就写overflow:hidden;_zoom:1;

后面的元素父盒子加上clear:both;盒子还是没有高度，margin失效；

两个盒子之前加上一个<div class="cl"></div> .fl{clear:both}，隔墙法，盒子还是没有高度，但是marign有用。

盒子加上::after{content:"",clear:both;} ，内墙法，这个元素自己最后的子元素是一个标准流元素，所以一下子给这个父盒子撑高了。特别好用。

描述一下浮动会造成什么影响，如何居中一个浮动元素？

【脱标】浮动的元素脱离标准文档流，【贴边】左浮动就会贴左边，又浮动贴右边，贴上一个兄弟元素的边，【字围】字会环绕这个浮动元素，【收缩】不区分行内元素和块级元素了，原来的行内元素现在可以设置宽度、高度，原来的块级元素如果不写width现在会自动缩减为内容宽度。

浮动的元素要想居中，必须相对定位。相对定位利用margin-left:50%; left:-宽度一半。

原理就是margin-left:50%;此时元素的左边线就会到屏幕中线，拉回自己的width一半即可。所以要用相对定位拉动。或者transform:translate(-50%,0);

也可以left:50%; margin-left:-宽度一半;

div{

float: left;

width: 500px;

height: 100px;

background-color: orange;

position: relative;

margin-left: 50%;

left:-250px;

}

</style>

简单说明绝对定位和浮动的区别和应用。

绝对定位脱离标准文档流，它的参考点是文档的左上角或者右上角。如果有任何父元素有定位属性，此时就依据“子绝父相”规则来设置自己的定位参考元素。在做网页时候非常的灵活方便。制作覆盖效果的时候，会大量使用绝对定位。

浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both;属性让标准流中的其他元素在此之后依次排列。

当float和margin同时使用时，如何解决IE6的双倍边距？

当浮动的方向和margin是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍margin。解决方法：

1) 改变margin的方向，float:left; margin-right:20px; 浮动向左，margin向右

2) 给第一个元素单独写一个类叫做.no1 此时.no1{_margin-left:一半的margin;}

3) 用display:inline;不用浮动了

行内元素和块级元素的区别，行内元素有哪些，块级元素有哪些？

行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素是“文本流元素”。span、a、em、b、u、i。

块级元素能设置宽度、高度，但是不能并排显示。div、h1、ul、p、li、section、header。

CSS引入的方法有哪些？都有什么区别？

外链式（也叫作外联式）<link href="1.css" type="text/css" rel="stylesheet" />

内嵌式（也叫作内联式）<style type="text/css"></style>

导入式<style>@import url(1.css)</style>

行内式<div style="width:200px;background:red;"></div>

内嵌式速度快，但是改版麻烦，可以减少HTTP请求。

外链式方便多个网页同时使用一个样式表。

行内式通常用于开发时候的临时测试，语义不清晰，不能使用。

导入式不好用，因为页面首先加载，然后导入样式表，页面在1s~2s内会有没有样式表的情况，然后突然有了样式。

在书写高效CSS时，需要考虑哪些问题？

基本原则是：去掉不必要的样式、合并相同的样式、尽可能缩小样式的大小、多用公共类、让css变得不臃肿。

我在工作中，经常使用gulp中有一个插件叫做gulp-csso，可以智能合并相同的样式，比如div p{font-size:10px;color:green;} p{color:green;} 它会智能变为：div p{font-size:10px;} p{color:green;}。

回答问题的时候一定要体现自己的知识渊博。

简述一下什么是内容与表现分离。

HTML就是负责语义，其他什么都不需要管。HTML不要用b、u、i来设置加粗、下划线、倾斜，而是写font-weight:bold; text-decoration:underline; font-style:italic; 用CSS来表示。再比如，logo可以用h1，用背景替换文字来呈递图片。text-indent:-999em;

CSS负责样式，不要写行内样式。