小浩IT-CSDN博客

原创深入理解盒模型

前面的话　　所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小宽高　　宽度width被定义为从左内边界到右内边界的距离，高度height被定义为从上内边界到下内边界的距离　　在CSS中，可以对任何块级元素设置显式高度。如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉...

2018-12-04 00:12:38 246

原创 CSS画出的图

简单图形矩形 div{ width: 100px; height: 100px; background-color: red; } div{ width: 100px; height: 100px; background-color: red; border-radius: 50%; } 椭圆【整个椭圆】 div...

2018-12-01 00:51:24 246

原创深入理解伪元素

定义　　伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection　　用法 :first-letter 　　指定一个元素第一个字母的样式　　[注意1]所有前导标点符号应与第一...

2018-11-27 23:36:52 2590

原创深入理解CSS计数器

前面的话　　我们对计数器已经不陌生了，有序列表中的列表项标志就是计数器。创建计数器　　创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量。 counter-reset counter-reset:none;(默认) counter-reset:<identifier><integer> //<identifier&gt...

2018-11-23 23:51:23 164 1

原创 CSS字体

字体系列【1】5种通用字体系列：拥有相似外观的字体系列　　serif字体:字体成比例，且有上下短线(衬线字体)，包括Times\Georgia\New century Schoolbook 　　sans-serif字体:字体成比例，且没有上下短线(无衬线字体)，包括Helvetica\Geneva\Verdana\Arial\Univers 　　Monospace字体:字体不成比例，等...

2018-11-22 23:41:15 250

原创 CSS层叠（优先级）

前面的话　　层叠样式表CSS最基本的一个特性就是层叠。冲突的声明通过层叠进行排序，由此确定最终的文档表示。而这个过程的核心就是选择器及其相关声明的特殊性、重要性、来源及继承机制。本文将详细介绍CSS层叠特殊性　　选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分(如：0,0,0,0)。下面来介绍不同的选择器的特殊性值　　1、内联样式 -> 1,0,0,0 　...

2018-11-22 00:04:25 1519

原创 CSS选择器

前面的话　　CSS的一个核心特性是能向文档中的一组元素类型应用某些规则，本文将详细介绍CSS选择器　　[注意]关于选择器兼容性的详细信息移步至此通配选择器　　星号*代表通配选择器，可以与任何元素匹配 *{color: red;} 元素选择器　　文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: ...

2018-11-20 23:44:16 231

原创 IE浏览器下常见的CSS兼容问题

宽高bug 　　【1】IE6-浏览器下子元素能撑开父级设置好的宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{

2018-11-14 22:16:09 3383 1

原创 haslayout详解

定义　　haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。　　[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况 HTML标签　　默认触发hasLayout的有如下HTML标签： ...

2018-11-12 23:33:29 173

原创 CSS常见的基础面试题合集

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-bo...

2018-11-11 18:15:04 422

小浩IT