随笔分类 - CSS重点
1
摘要：offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
阅读全文
摘要：https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/article/details/77926868
阅读全文
摘要：1. 介绍 1.1 说明 Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。 1.2 主要的值 ①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档
阅读全文
摘要：响应式布局是什么 它是相对于固定像素大小的网页而言的，顾名思义，响应式布局就是网页能够响应各种各样不同分辨率大小的设备，能够将网页很好的呈献给用户。 如何实现响应式布局？ 1、CSS3@media查询 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕
阅读全文
摘要：px：pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元 pt：point，点，印刷行业常用单位，等于1/72英寸 ppi：pixel per inch，每英寸像素数，该值越高，则屏幕越细腻 dpi：dot per inch，每英寸多少点，该值越高，则图片越细腻 dp： dip，Densit
阅读全文
摘要：怎么在高清屏上画一条0.5px的边呢？0.5px相当于高清屏物理像素的1px。这样的目的是在高清屏上看起来会更细一点，效果会更好一点，例如更细的分隔线。 理论上px的最小单位是1，但是会有几个特例，高清屏的显示就是一个特例。高清屏确实可以画0.5px，对比效果如下： 直接设置0.5px，在不同的浏览
阅读全文
摘要：引入CSS的方式有四种：内联方式、嵌入方式、链接方式、导入方式。 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。 这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如
阅读全文
摘要：块级元素 特点： 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。 可以设置高度、宽度、各个方向的margin以及各个方向的padding。 当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。 块级元素中可以容纳
阅读全文
摘要：Opacity opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。 Visibility 将visibility的值设为 hidden
阅读全文
摘要：伪类 CSS2中对伪类的定义是：CSS 伪类用于向某些选择器添加特殊的效果。 截止css2，伪类有以下几种： CSS3中对伪类的定义如下： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息（如：:link、:visited）以及不能被常规CSS选择器获取到的信息（:target用来匹配
阅读全文
摘要：CSS中Box model是分为两种: W3C标准（标准盒模型） 和 IE标准盒子模型（怪异盒模型）。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。 重要的一个属性是box-sizing:content-box || border-box || inherit（默认是c
阅读全文
摘要：一、float浮动 两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，或者向同一个方向浮动。 当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法： 给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:
阅读全文
摘要：一、什么是BFC BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于定位方案的普通流（普通流中元素的位置由该元素在 HTML 文档中的位置决定）。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。在进行
阅读全文
摘要：元素在浮动之后有三个重要的特点： 解决父元素高度坍塌的方式就是清除浮动。 以下述代码为例： 最后的结果是： 一、给父元素定义height 结果为： 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 二、父元素也一起浮动 缺点：会产生新的浮动问题。如图中div2上
阅读全文
摘要：所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线。 从上到下四条线分别是顶线、中线、基线、底线，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。基线不是最下面的线，最下面的是底线。 行高是指
阅读全文
摘要：行内元素 行内元素就是内联元素。例如<span>、<a>、<label>、<em>、<img>等。。 要点：直接构建一个具有 ”text-align:center“样式的容器，那么里面包含的行内元素就会都居中了。 块级元素 块级元素有：div , p , form, ul, li , ol, dl,
阅读全文
摘要：div居中 1、使用绝对定位和负外边距让块级元素垂直居中 要点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。 CSS代码： 或者如下： 2、使用绝对定位和transform让块级元素垂直居中 要点：不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比
阅读全文
摘要：一、Flex简介 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。试用场景：弹性布局适合于
阅读全文
摘要：常用的选择器 元素（标签／简单）选择器--p，h1等、 ID选择器--#id名、 类选择器--.类名、 后代选择器（可以将类或者ID应用于它们的祖先，然后使用后代选择器来定位，选择所有后代）--空格连接。 伪类：根据文档之外的其他条件为文档应用样式，如表单元素或链接的状态。 ：link和：visit
阅读全文
1
浙公网安备 33010602011771号