了解CSS核心精髓(一)
CSS
1.css外联
正确写法:<link rel="stylesheet" href="css/style.css" />
<style type="text/css"> @import url(xxx.css); </style>
2.w3c盒子模型与IE盒子模型
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
IE 盒子模型的范围包括 margin、border、padding、content, content 部分包含了 border 和 padding。
3.padding与margin
大盒子用padding,小盒子用margin(优先使用padding)。
4.网页字体设置
默认字体:字体大小(仅供参考,12px或者14px)、行高(18px)(优先使用无单位,无单位的会继承后再计算,值是动态的,有单位的会算出来然后继承,值是固定的)、颜色(#333或者#666,不要使用纯黑色,UI设计的原因)。
正确写法: font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
(适合pc与moblie,Tahoma针对windows平台,Helvetica针对mac平台,Arial通用性字体,sans-serif针对liunx平台,其实是指无衬线字体 )。
PS:微软雅黑字体是有版权的,是微软的,所以不建议使用该字体(看需求吧,不过这种字体比较像黑体,比较好看一些)。
调用微软雅黑字体是不会涉及版权的,如:font-family:microsoft yahei;
使用微软雅黑字体是涉及版权的,如:@font-face {
font-family: yahei;
src: url(yahei.woff);
}
中文网页不设置字体,默认是宋体。
建议设置字体使用英文,不使用中文。正确写法:body{font-family:"microsoft yahei";}
body{font-family: "微软雅黑";}
补充:font-style属性 oblique 与 italic区别
italic:使用斜体的文字。
oblique:将没有斜体字进行倾斜。
字体要设置宋体,字体大小建议14px。
字体颜色不要纯黑色。
字体尽可能用em。
5.css中border:0与border:none区别
boder:0 ------- border-width: 0; (border-width的简写)
border:none ------- border-style: none; (border-style的简写)
PS:表面效果差不多,但如果配合多个css的样式的话可能会有差异。
boder:none的渲染效果要比boder:0渲染效果要快些。
border:0 兼容所有浏览器。
6.display与visibility隐藏元素。
display:none; 浏览器不会分配该元素的空间,不占文档流。
visibility:hidden; 浏览器会分配该元素的空间,占文档流。
7.display-inline有空格
(1)css添加负margin
(2)html去掉闭合(不考虑IE兼容)
<a href="#!">aa
<a href="#!">bb
<a href="#!">cc
8.css中的居中方法
margin:0 auto; ( 需要居中的盒子加宽度值)。
text-align: center;
PS:移动端使用Flexbox布局居中。
PC端使用绝对布局居中。
9.css选择器类型
通配选择器
* (选择所有标签元素)
标签选择器
html (选择<html>标签元素)
id选择器
#user (选择id为user 元素)
PS:id具有唯一性。
class选择器
.user (选择class为user的所有元素)
关系选择器
div,p (选择所有 <div> 元素和所有 <p> 元素)
div p (选择 <div> 元素内部的所有 <p> 元素)
div>p (选择父元素为 <div> 元素的所有 <p> 元素)
div+p (选择紧接在 <div> 元素之后的所有 <p> 元素)
属性选择器
element[name="user"] (选择其 name 属性值为user的element元素)
element[src^="https"] (选择其 src 属性值以 "https" 开头的每个element元素)
伪类选择器
element:hover (设置在此元素的划过)
element:first-child(设置在此元素出现第一个子元素)
伪类对象选择器
element:before (设置在此对象前面的内容)
element:after (设置在此对象后面的内容)
10.css中的选择器优先级
选择器优先级:id>class>html>*
PS:内联样式于!important哪个优先级最高
!important是最高的
11.css选择器之间有无空格区别
如:.class1.class2 <div class="class1 class2"></div>
.class1 .class2 <div class="class1"><div class="class2"></div></div>
12.css中的权重与css样式的行数
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
PS:样式之间冲突问题:一般行数在后面样式的会覆盖前面的行数样式。
13.盒子并排排放思路或者是不同浏览器布局排放盒子掉位
参考bootstrap框架的盒子排放做法,大盒子使用margin负数,小盒子使用padding正数来对其每一个盒子。
14.css颜色代码选择
优先使用十六进制颜色与RGB颜色(兼容旧版本),其次使用RGBA 颜色值,HSL 颜色,HSLA 颜色(现代浏览器支持,支持透明)。
15.css代码简写
颜色代码简写,paddin、margin、 font、border、background属性简写成一行。
16.不要使用css表达式
影响浏览器性能,除非需要兼容IE旧版本。
17.单位em与rem使用
一般应用在移动端,移动端父元素要设置一个定值。
如:父元素body{font-size:16px;}
子元素p{font-size:1em}
em是相对单位,拥有相对大小属性,用于文字。
rem是css3的相对单位,拥有绝对大小与相对大小属性,用于设置长宽度,间距等。
18.css滤镜
png图片利用css filter变色,达到图片颜色切换效果。
19.css剪切
利用css clip-path生成不同规则的图案。(仅适用于chrome浏览器)
20.文本没有对齐
如:默认 xxxxxxxx 对齐 xxxxxxxx
xxxxxxxx xxxxxxxxxx
xxxxxxxxxx xxxxxxx
中文排版:添加text-align:justify;text-justify:inter-ideograph;
英文排版:添加text-align:justify;
21.css性能优化
css规则类越少越好。(尽量少的去对标签进行选择,而是用class)
如:(1) .nav {} (2) .nav{}
.nav-li{} .nav li{}
.nav-li-span{} .nav li span{}
PS:浏览器查看css 规则是从右到左,如 .class1 .class2{}
先找到class2,然后再找到class1。
请不要误认(2)就是所谓的css模块化。
22.合并上下边距问题。
<div style="width:100px; background:#930; height:100px; margin-bottom:10px;"></div>
<div style="width:100px; background:#f30; height:100px; margin-top:10px;"></div>
解决方法:加float、display、position: absolute;
如:<div style="width:100px; background:#930; height:100px; margin-bottom:10px;float:left;"></div>
<div style="clear:both;">
<div style="width:100px; background:#f30; height:100px; margin-top:10px;float:left;"></div>
23.左边固定,右边自适应。
左边固定宽度,右边使用margin-left。
24.浏览器窗口缩放,页面位置错位。
设置min-width与min-height,保证布局不错位。
25.svg与canvas区别
Canvas是使用JavaScript程序绘图(动态生成)。
SVG是可伸缩矢量图形 (Scalable Vector Graphics),使用XML文档描述来绘图。
26.min-width/min-height与max-width/max-height用法
PC web页面使用max-width/max-height属性,适配小屏幕设备。
moblie web页面使用min-width/min-height属性,适配大屏幕设备。
转载于:https://www.cnblogs.com/Sroot/p/6830851.html
了解CSS核心精髓(一)相关推荐
- CSS核心内容整理 - (中)
2019独角兽企业重金招聘Python工程师标准>>> 本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四. 页 ...
- 第三天 css核心属性
CSS核心属性 一.CSS属性组成和作用 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性 属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜色值等. 二 ...
- CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面 一.基础 在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
- 牛腩之CSS核心内容
根据牛老师的讲解,CSS的核心内容大致为四个部分:标准流.盒子模型.浮动和定位. 在学习核心内容之前,先来了解两个基本概念:块级元素和行内元素. 根据CSS规范的规定,每一个网页元素都有一个displ ...
- CSS核心内容:标准流、盒子模型、浮动、定位
目录 一.标准流 块级元素 行内元素 与HTML元素之间的区别 二.盒子模型 三.浮动(Float) 四.定位(Position) 一.标准流 标准流指的是元素排版布局过程中,元素会默认自动从左往右, ...
- 牛笔了!字节跳动大佬整理:CSS 核心知识(万字长文,值得收藏!)
本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开.虽然行文偏长,但较基础,适合初级中级前端阅读,阅读的时候请适当跳过已经掌握的部分. 这篇文章断断续续写了比较久,也参考了许多优秀的文章,但 ...
- 【游戏小心得】火焰纹章的核心精髓
火焰纹章系列的每款游戏,都是质量和诚意很高的作品.作为它的资深粉,有几点核心精神拿出来给大家分享,以下火纹是火焰纹章的简称: 1.死了就是死了.<火纹>的一大特色,就是被打死的英雄没有办法 ...
- 第四课 CSS核心知识点
一.块元素: 特点: 1.默认显示在页面的左上角,内容也是默认在左上角 2.默认单独占满一行(占满整个文档流) 常用的块级元素: p.h1-h6.ul li.ol li.div.hr.table. 二 ...
- css基础选择器教程,CSS核心基础 一些常见的选择器的使用 小白教程
要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素.在CSS中,执行这一任务的样式规则部分被称为选择器.在CSS中有很多的选择器,包含标记(标签)选择器.类别选择器.id选择器.通配符选择 ...
最新文章
- JavaScript中七种函数调用方式及对应 this 的含义
- 293/294 Flip Game I and II -- back tracking ing
- java 会话跟踪技术_JavaEE基础(04):会话跟踪技术,Session和Cookie详解
- Android开发笔记(一百二十五)自定义视频播放器
- 软件设计师23-存储器系统02
- Python基础——try(异常处理)
- c语言中的有符号数和无符号数
- 大学计算机计算思维期末试题及答案,大学计算机计算思维导论期末考试
- matlab中提取裂缝图像,灰度图像中裂缝自动识别和检测方法与流程
- 怎么把几段音频文件合并成一个
- 团队项目(3) -- 搭载于MSP430F6638_FFTB的仿《像素小鸟》小游戏
- Redis深入浅出—hash、set
- 【清明节】开发平台公司流辰信息缅怀先祖,传承精神,撸起袖子创佳绩!
- spring技巧之bean加载顺序控制
- Windows命令行下常用网络命令解释大全
- 2.Go语言环境配置
- Activity理念(一个字头的诞生)
- 淘宝天猫开放平台店铺商品发布(新)-淘宝店铺发布API接口流程代码对接说明
- TS2694: Namespace ‘‘ has no exported member
- 文献翻译:Genomic features of bacterial adaptation to plants
热门文章
- 海量url mysql_海量数据mysql优化步骤
- 数据结构之二叉树:二叉查找树的先序、中序、后序、层序遍历,Python代码实现——10(续)
- LeetCode 803. 打砖块(并查集)
- LeetCode 790. 多米诺和托米诺平铺(动态规划)
- LeetCode 1487. 保证文件名唯一(哈希map)
- LeetCode 388. 文件的最长绝对路径(不用栈,前缀和)
- LeetCode 999. 车的可用捕获量
- LeetCode 720. 词典中最长的单词(Trie树)
- java impala_Java实现impala操作kudu
- c语言中把一个数缩小十倍_C语言实例第04期,在控制台打印出著名的杨辉三角...