专栏首页娜姐聊前端前端知识点系列二:CSS

前端知识点系列二:CSS

1. 标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
  • IE的content部分把 border 和 padding计算了进去;

无论是哪种盒子模型,子元素相对于父元素content定位。 改变盒子模型的属性为 box-sizing: border-box/content-box;

2. CSS选择符有哪些?哪些属性可以继承?

  1. id选择器( # myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div, h1, p)
  4. 相邻选择器(h1 + p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器( * )
  8. 属性选择器(a[rel = "external"])
  9. 伪类选择器(a:hover, li:nth-child)
  • 可继承的样式: font-size font-family color, UL LI DL DD DT;
  • 不可继承的样式:border

3. CSS选择器优先级算法如何计算?

!important > id > class > tag

important 比 内联优先级高

4. CSS选择器的权重

/*权重为1*/ div{ }
/*权重为10*/ .class1{ }
/*权重为100*/ #id1{ }
/*权重为100+1=101*/ #id1 div{ }
/*权重为10+1=11*/ .class1 div{ }
/*权重为10+10+1=21*/ .class1 .class2 div{ }

5.display有哪些值

属性

说明

block

像块类型元素一样显示

none

隐藏元素,并且不占位

inline-block

像行内元素一样显示,但其内容象块类型元素一样显示

list-item

像块类型元素一样显示,并添加样式列表标记

table

此元素会作为块级表格来显示

inherit

从父元素继承 display 属性的值

6. position属性值

  1. absolute 生成绝对定位的元素,相对于值不为 static的第一个父元素进行定位。
  2. fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。
  3. relative 生成相对定位的元素,相对于其正常位置进行定位。
  4. static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
  5. inherit 规定从父元素继承 position 属性的值

7. CSS3有哪些新特性?

新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (Shadow\Reflect)
文字特效 (text-shadow)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
增加了旋转,缩放,定位,倾斜,动画,多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

8. 如何用CSS创建一个三角形?

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent; 
}

9. 块元素水平垂直居中

<div id="container">
    <div id="box">
        元素水平居中
    </div>
</div>

<style>
/* 利用transform */
#container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #0099cc;
}

#box {
  width: 100px;
  height: 200px;
  border: 2px solid blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 或者利用flex*/
#container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #0099cc;

  display: flex;
  justify-content: center;
  align-items: center;
}

#box {
  width: 100px;
  height: 200px;
  border: 2px solid blue;
}
</style>

10. px,em和rem的区别

  • px像素是相对于屏幕分辨率的相对长度单位。比较精准
  • em是相对文本字体尺寸的相对单位(1em = 16px)。当改变浏览器设置里的字体大小时,em值也会相应改变。 em会继承父级元素的大小,类似百分比。所以,它的值并不固定。
  • rem(font size of the root element)是相对HTML根元素的相对单位,和px之间的转换规则和rem一样。它的优势在于不会继承父级元素,所以值固定。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

11. 如何清除浮动

最常用的两种方法如下(应用在父元素上面):

<div id="box" class="clear">
    <div id="child">a float box</div>
</div>

<style>
body {
    padding: 100px;
}

#box {
    border: 2px solid red;
}

#child {
    float: left;
    width: 100px;
    height: 100px;
    border: 2px solid green;
}
/*方法一*/
.clear {
    overflow: hidden;
}
/*方法二*/
.clear:after {
    display: block;
    content: '';
    clear: both;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ECMAScript6基础学习教程(五)对象

    当属性名和属性值变量同名时,ES6允许在对象中只写属性名,不写属性。 关键点有两个:

    娜姐
  • 前端网络高级篇(四)CORS 跨域

    AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击...

    娜姐
  • 前端网络高级篇(六)网站性能优化

    缺点是:此方案不适合mobile应用;IE7以下不支持;如果一张图片在多个页面被用到,无法利用浏览器缓存。 为了解决无法缓存问题,可以将data:image应...

    娜姐
  • 微信拍一拍效果的原理分析及代码实现

    微信拍一拍功能上线之后,其用户评价褒贬不一,这里我们不去凑热闹讨论这个功能的应用场景是否真的如部分网友说的毫无卵用,毕竟这是产品经理们应该考虑的事,但我相信作为...

    石璞东
  • CSS元素分类

    快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。                设置display:block...

    用户1624346
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控

    先补充一个平面化登陆页面代码,自己更换喜欢的颜色背景 @using Apps.Common; @{ Layout = null; } <!DOCT...

    用户1149182
  • 来来来,手把手教你做大白!

    这个东西也是经常被拿来玩的一个小东西,就是通过border-radius 去自己切一个图形。

    疯狂的技术宅
  • 自定义按钮~自适应布局~常见bug

    超然
  • CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1....

    张果
  • 一个搜索条样式,包括select的美化

    一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD X...

    练小习

扫码关注云+社区

领取腾讯云代金券