前端日记(一)

久别无恙

于 2020-11-03 10:57:24 发布

阅读量213

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_44300774/article/details/109462637

版权

标准的css盒子模型及其和低版本的IE盒子模型的区别？
标准的(W3C)盒子模型:width=内容（content)+border+padding+margin,低版本IE盒子模型:width = 内容宽度(content+border+padding)+margin图片展示:

区别：标准盒子模型盒子的height和width是content(内容)的宽高，而IE盒子模型盒子的宽高则包括content+padding+border部分.
几种解决IE6存在的bug的方法
由float引起的双边距的问题，使用display解决;
由float引起的3像素的问题，使用display:inlin-3px;
使用正确的书写顺序link visited hover active,解决超链接hover 点击失效问题;
对于IE有z-index问题，通过给父元素增加position:relativen解决;
使用!important解决Min-height最小高度问题;
使用!frame解决select在IE6下的覆盖问题;
使用over:hidden,zoom:0.08,line-height:1px解决定义1px左右的容器宽度问题;
注意:有关IE6支不支持!important的问题，对于单个类是支持的。例如:
.content{color:ping !importent}
.content{color:orange};
//这里IE6以上,FF,google等都将显示粉红色复制代码，但是，当一个样式内部有多个相同属性。列：
.content{color:pink !importent;color : orange};
IE7及以上，FF，google显示粉红色，而IE6将显示橙色(原因是一个样式重复设置了属性，后面的就会覆盖掉之前的)复制代码
Css选择符有哪此? 哪些属性可以继承？
常见的选择符有一下：
id选择器（#content），类选择器（.content）, 标签选择器（div, p, span等）, 相邻选择器（h1+p）, 子选择器（ul+li）, 后代选择器（li, a），通配符选择器（*）, 属性选择器（a[rel = “external”]），伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size, font-family, color, UL, LI, DL, DD, DT;
不可继承的样式属性： border, padding, margin, width, height；
CSS优先级算法如何计算？
考虑到就近原则，同权重情况下样式定义以最近者为准
载入的样式按照最后的定位为准
优先级排序：
同权重情况下：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
!important > # > . > tag
注意： !important 比内联优先级高
CSS3新增伪类有那些？
:root 选择文档的根元素，等同于html元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
如何居中div? 如何居中一个浮动元素？如何让绝对定位的div居中？
水平居中

 css:
 *{margin:0;padding:0}
 .content{
 margin:0 auto;
 width:100px;
 height:100px;
 background:pink
 }
 html:
 <div class="content"></div>复制代码

垂直居中

css:
 *{margin:0;padding:0;}
 .content{
 width:100px;
 height:100px;
 background:pink;
 position:absolute;
 top:50%;
 left:50%;
}
html:
<div class = "content"></div>复制代码

居中浮动元素

css:
*{margin:0;padding:0;}
.content{
width:100px;
height:100px;
background:pink;
position:relative;
top:50%;
left:50%;
margin:-150px 0 0-250px;
}
html:
<div class="content"></div>复制代码

如何让绝对定位的div居中

css: 
    * {margin: 0; padding: 0;}
    .content {
        margin: 0 auto;
        position: absolute;
        width: 1500px;
        background: pink;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

html: 
    <div class="content"></div>复制代码

7.display有哪些值？他们的作用是什么？

none 使用后元素将不会显示
block 使用后元素将变为块级元素显示，元素前后带有换行符
inline display默认值。使用后原色变为行内元素显示，前后无换行符
list-item 使用后元素作为列表显示
run-in 使用后元素会根据上下文作为块级元素或行内元素显示
table 使用后将作为块级表格来显示（类似<table>），前后带有换行符
inline-table 使用后元素将作为内联表格显示（类似<table>），前后没有换行符
table-row-group 元素将作为一个或多个行的分组来显示（类似<tbody>）
table-hewder-group 元素将作为一个或多个行的分组来表示（类似<thead>）
table-footer-group 元素将作为一个或多个行分组显示（类似<tfoot>）
table-row 元素将作为一个表格行显示（类似<tr>）
table-column-group 元素将作为一个或多个列的分组显示（类似<colgroup>）
table-column 元素将作为一个单元格列显示（类似<col>）
table-cell 元素将作为一个表格单元格显示（类似<td>和<th>）
table-caption 元素将作为一个表格标题显示（类似<caption>）
inherit 规定应该从父元素集成display属性的值
其中，常用的有：block， inline-block， none， table， line。

8.position的值relative和absolute定位原点？

首先，使用position的时候，应该记住一个规律是‘子绝父相’。
relative（相对定位）： 生成相对定位的元素，定位原点是元素本身所在的位置；
absolute（绝对定位）：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。
fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right、z-index 声明）。
inherit：规定从父元素继承 position 属性的值。

9.CSS3有哪些新特性？

关于CSS新增的特性，有以下：
选择器;
圆角（border-raduis）;
多列布局（multi-column layout）;
阴影（shadow）和反射（reflect）;
文字特效（text-shadow）;
文字渲染（text-decoration）;
线性渐变（gradient）;
旋转（rotate）/缩放（scale）/倾斜（skew）/移动（translate）;
媒体查询（@media）;
RGBA和透明度 ;
@font-face属性;
多背景图 ;
盒子大小;
语音;
大致想到这么多，有遗漏的可以留言指出，小编看到会加上。

10.用纯CSS创建一个三角形的原理是什么？
方法一：隐藏上，左，右三条边，颜色设定为（transparent）

css: 
    * {margin: 0; padding: 0;}
    .content {
        width: 0;
        height: 0;
        margin: 0 auto;
        border-width: 20px;
        border-style: 20px solid;
        border-color: transparent transparent pink transparent;
    }

html: 
    <div class="content"></div>复制代码

方法二：采用的是均分原理

实现步骤： 1.首先保证元素是块级元素；2.设置元素的边框；3.不需要显示的边框使用透明色。
css: 
    * {margin: 0; padding: 0;}
    .content {
        width:0;
        height:0;
        margin:0 auto;
        border:50px solid transparent;
        border-top: 50px solid pink;
    }

html: 
    <div class="content"></div>复制代码