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属性,适配大屏幕设备。

了解CSS核心精髓(一)的更多相关文章

  1. CSS 设计彻底研究(一)(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  2. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

  3. CSS核心概念之盒子模型

    盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...

  4. css核心基础总结篇

    今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解 ...

  5. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  6. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  7. CSS核心内容:层叠和继承

    实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...

  8. CSS核心问题

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如 ...

  9. CSS核心的几个概念

    盒模型.position.float.他们是css的基础,之间看似独立却又相辅相成. 元素类型 块级元素.内联元素 他们之间有以下区别: 1.块级元素独占一行,除非显示的修改display属性.而内联 ...

随机推荐

  1. 关于使用mybatis的分页插件问题

    首先我需要导入架包 1.pagehelper 如果你是在mybatis中配置分页‘ 如下代码 <plugins> <plugin interceptor="com.gith ...

  2. SpringBoot 数据库操作 增删改查

    1.pom添加依赖 <!--数据库相关配置--> <dependency> <groupId>org.springframework.boot</groupI ...

  3. React日常注意点

    1.在定义组件的时候,名字首字母一定要大写 最近刚学,我会持续把自己学习过程中的的注意点在这里逐个列出,敬请等待!

  4. ios 12 xcode10 新升级的编译报错libstdc++.6.0.9 Multiple commands produce

    问题一 编译报错 Showing Recent Messages :-1: Multiple commands produce '/Users/duning/Library/Developer/Xco ...

  5. WinForm form属性

    一.布局 Autostroll   控件内容大于可见区域是否自动显示滚动条 Maximumsize 窗体可调到最大尺寸 minimumsize  窗体可调到最小尺寸 size  窗体看到的尺寸 Sta ...

  6. Set、Map及数组去重

    https://cloud.tencent.com/developer/article/1437254 https://blog.csdn.net/weixin_34247299/article/de ...

  7. 字符编码:Unicode和UTF-8的关系

    今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步搞清楚. 下面就是我的笔记,主要用来整理自己的思 ...

  8. ctDNA|endosymbiosis

    5.10叶绿体基因组编码多种蛋白质和RNA 叶绿体和线粒体的共同点:叶绿体和线粒体的大小,功能(编码区)大体一致,但叶绿体拥有更多基因,所以在编码tRNA时,也有内含子作为被剪切片段. 因为在原核生物 ...

  9. java基础—GUI编程(二)

    一.事件监听

  10. vs 2012打开vs2013的sln

    Project -> Properties -> General -> Platform Toolset (as IInspectable correctly commented)