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. Mind must be master of the body, strong mind can separate the body from its suffering.

    Mind must be master of the body, strong mind can separate the body from its suffering.意志是身体的主人,有顽强的意 ...

  2. 【简抄】h5 新增的几个背景属性和文本属性

    一.背景图像显示: ①background-size:规定背景图像的大小: 值:像素值.百分比.auto.cover.contain ②background-origin :规定背景图像的起始位置: ...

  3. Ubuntu 配置IP地址方法

    接到一客户的服务器,开机已启动发现是Ubuntu系统,当时有点郁闷了,心想没有配置过ubuntu系统,这客户还在旁边了,心里有点紧张了,于是开始上网寻找各种方法配置,最终将IP配置好,给客户上架调试通 ...

  4. GreenDao 数据库升级 连接多个DB文件 或者指定不同的model&dao目录

    相信很多人都用过greenDao 今天 我抽空总结下使用的时候一些小东西吧 废话不多说 下边就GreenDao 的使用遇到的问题以及解决方案记录一下吧. 1.greendao 指定不同的生成目录: S ...

  5. 使用SharePreferences存取数据（慕课笔记 ）

    0.视频地址:http://www.imooc.com/video/3265 1.使用SharePreferences存取数据: public class MainActivity extends A ...

  6. Git在Xcode中的配置与使用常见问题总结

    书接上回提出的Git在Xcode中的配置与使用常见问题4个问题 问题1,如何在Xcode中创建代码库,并添加和提交代码到代码库? 问题2,如何在Xcode中提交推送给远程服务器代码库? 问题3,如何在 ...

  7. WinForm 窗体API移动 API阴影

    窗体移动 //窗体移动API [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllI ...

  8. 结构化查询语言-SQL

    结构化查询语言(Structured Query Language)简称SQL(发音:/ˈes kjuː ˈel/ "S-Q-L"),是一种特殊目的的编程语言,是一种数据库查询和程 ...

  9. python基础一 day15 内置函数

    '\r' 回车,回到当前行的行首,而不会换到下一行,如果接着输出的话,本行以前的内容会被逐一覆盖: '\n' 换行,换到当前位置的下一行,而不会回到行首: # print()# input()# le ...

  10. 实验十三 团队作业9：Beta冲刺与团队项目验收

    实验十三 团队作业9:Beta冲刺与团队项目验收 实验时间 2019-6-20(21) Deadline: [6.20-6.26]之间任选连续3天的23:00,以团队随笔博文提交时间为准. 评分标准: ...