css属性值语法:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax

1、margin-top属性不起作用的几个原因  : 参考   http://www.php.cn/div-tutorial-55481.html  及

   关于内层DIV设置margin-top不起作用的解决方案: http://www.cnblogs.com/huangyong8585/archive/2013/05/21/3090779.html

  标签内的第一个标签设margin-top和最后一个标签设margin-bottom是没有效果的,他们都会作用到父元素上的。

2、css尺寸单位选择以及padding

表格常用样式:

   1、border-collapse:属性可以设置表格边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示

CSS选择器:http://www.w3school.com.cn/cssref/css_selectors.asp

1、排除某个元素的一类元素::not(selector) 。

   如:li:not(.icon)  选择li中不是icon类名的所有 li标签。

2、


下面的内容是以前有道道云笔记的,有时间需要整理到上面去

1、内联及行内元素设margin-top,padding-top没有效果,因为他们是基于基线对齐的。(需要自己多尝试下)

background-attachment:fixed  属性可以让背景图在浏览器窗口始终固定不变(就好像脱离了该背景图的标签),下面的内容滚动上去可以把它覆盖。

5、网页布局中侧边栏的一些与版心没有联系的的模块一律用定位,不然在网页变小(小屏幕电脑上)的时候侧边栏的元素会影响版心内容布局的。标准文档流就不用说了,浮动会有字围效应的。

6、如果一张大的banner图(内有文字),在浏览器变小的时候回使文字缺少一部分的话,可以把文字和背景分成两张图片处理。

7、vertical-align: top;属性是设置在子元素上的,也就是需要东西的的行内元素本身。

8、css3浏览器兼容问题就考虑5类:-webkit-;-moz-;-ms;-o-;还有一个是没有私有前缀的。

9、transform-origin:属性设置原点,是相对于该标签的左上角哪个点。默认的原点是图片中心点,也就是transform-origin:50% 50% 0;

11、如果文本的盒子设了弹性盒子模型,文字左右居中,text-align: center;属性会失效,还得单独测试一下。

12、css选择器最好是后代选择器和类名选择器的组合,因为如果页面出现改动,子代,后台和标签选择器组合的耦合性太大了,如果添加模块,模块正好是他的子代和或后代,那样式就会很乱的(因为标签名同类的太多了)。有一些ul下面的li是同样的样式的,这种可以给ul进行类选择器,后面的li用子代选择器比较好(用后代选择器的话,如果li后面嵌套了一个ul>li标签的话还是会出现耦合的)。

13、css组合选择器常用:后代、子代、相邻兄弟(下一个兄弟选择器)、

普通相邻兄弟(下面的所有兄弟选择器)[以上选择器在ie6以上都支持]

14、页面布局的时候,模块之间的左右间距不要严格按照设计图把值定死了,用户的浏览器是不同一的,有大有小的。所以这些间距就是灵活变动适应不同浏览器的一个方案。

15、父级元素的宽度太大的情况下,使用定位最好不要使用右边参考点,不然浏览器宽度变小的时候,整个结构就会乱掉。固定就另当别论了。

16、display:inline-block;和浮动的效果好像,因为脱离标准流的元素会隐式的转化为inline-block类型。但是和显示的display:inline-block;又有不同,显示表示的时候就不得不考虑元素的基线对其问题。

17、给元素设高度100%,往上推的父级元素的高度必须是可以确定,不然计算机没法计算的。如父元素的高度是通清除浮动撑出来的高度,给子元素设100%是无效的,

18、弹性盒子模型,盒子的之间的距离一定的相同的,不过他们之间的具体距离可以通过margin或pading值来改变的。

19、内联元素(包括行内块)默认都是基线对齐的,图片的基线就是图片的底部。父级元素默认 底边上一点的距离是基线对齐的地方(这个也只是对内联元素的子代有意义,块级元素没有任何影响)。内联元素一定是先按照内联元素对齐规则对齐后,再从上到下排版的。当文字的,图片的 vertical-align不为基线时或父元素的高度比图片大的多,则父元素默认 底边上一点的距离是基线就根本没有意义了,和没有一样。即父级元素默认 底边上一点的距离是基线只是在内联子元素是以基线对齐的时候会有效果。

也可以另外一种理解(个人自己的想法,觉的这种解释更合理。),内联元素始终是基线对齐的,内联元素高度最高的那个是决定基线所在的位置的,通过vertical-align可以设置它的基线位置,而其他的内联元素的vertical-align则是声明它们要和基准元素的关系,是和基准的头部对齐 还是基线对齐、又或者是底部对齐。

注意:vertical-align:bottom用在最高的内联元素则说明是与父元素以底边对齐的,与基线无关了。

20、父元素高度不是定值时,子元素高度用百分比是没有效果的。比如,父元素高度是被子元素撑高的,也包括清除浮动撑出来的高度。但是如果是定位元素的话,父元素高度不定,子元素也是单位的话,高度100%确是可以获得的。

21、banner图片用img标签和作为背景图片,两者各有优缺点。img只设宽度,图片会等比例缩放,这样的话高度就不能固定了;而作为背景,图片可以始终居中,图片大小不对改变,但是容器的宽度不够,会把图片两边给切掉的。如果banner图的突出看点是在之间部分的话用这种方法还是很不错的。

22、绝对定位元素,通过设置top、bottom可以决定他的高度;left、right可以决定他的宽度,这样不用设宽度和高度就可以设置元素的宽度和高度了。iscroll插件就是用的这种方法。

24、body最好给他设一个最小宽度,因为  有的的时候banner区域不一定在版心区域,可能是通栏。如果没设这个属性的话,当缩小的版心后,有版心的也许就不会变化了(下面出现横向滚动条),但是通栏的还会不断的缩小。

26、css3的弹性盒子的高度可以被子元素撑开

27、标签中如果有  文本 或 内容元素标签(img) 则,这个标签内的行高就会有效。即,如果标签内只有一个img标签,没有任何内容,这个标签一会被行高撑出高度来。

28、有的标签不能继承父辈的font-size属性与color属性,如 <button>。

29、body高度为0为什么背景色能充满整个浏览器  : https://www.sohu.com/a/146413356_230028

30、自定义滚动条样式:https://baijiahao.baidu.com/s?id=1620626742712547161&wfr=spider&for=pc  或  https://codepen.io/stevenlewis/pen/hubpL(可以看效果展示)

css样式总结体会的更多相关文章

  1. 最近关于css样式重构的一点心得体会

    之前的项目一直都是基于bootstrap,elementUI这些已经很成熟的框架进行二次开发,要么就是一些很小的宣传页面,h5页面,或者结构相对简单的移动端.一直都没有机会对css的整体进行一个思考, ...

  2. 前台界面(2)---CSS 样式

    目录 1. 内联样式 2. 层叠样式表CSS 2.1. 类选择器 2.1.1. 颜色设置 2.1.2. 字号设置 2.1.3. CSS边框属性 2.1.4. 设置背景颜色 2.1.5. 设置布局边框 ...

  3. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  4. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  5. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  7. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  8. 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  9. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

随机推荐

  1. src/lib/framework/src/driverFramework.cpp学习

    int Framework::initialize() { DF_LOG_DEBUG("Framework::initialize"); g_framework = new Syn ...

  2. c#如何写服务,打包和卸载服务

    Service.cs  每隔一分钟进行一次数据操作 public Service1()        {            InitializeComponent();            Sy ...

  3. Git Git管理码云项目

    Git  一.下载安装 1. 要使用git 先安转git 请到官网下载最新git  https://git-scm.com/downloads 2. 一路默认安装,安装完成右键查看下是否有Git. 二 ...

  4. 分布式系统理论进阶7:Paxos变种和优化

    本文转自:https://www.cnblogs.com/bangerlee/p/6189646.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...

  5. Android程序中欢迎界面

    额,在做项目中,肯定首先要用到欢迎界面,下面是我在做项目中用的最简单的一个欢迎界面,即打开程序时,先是显示一张图片,然后等一段时间后图片消失,进入登录界面.直接上代码,有注释也不用解释了: 首先是We ...

  6. CPU、内存、磁盘三者的关系

    参考:https://blog.csdn.net/weini1111/article/details/70849332 cpu是大脑,计算数据用的. 内存是草稿纸,开着电脑一直都在用里边的数据,如果断 ...

  7. 03、python的基础-->str字符串的使用

    1.字符串首字母大写 s = "aksjdjjhfhdhjaGGGGkkk" s1 = s.capitalize() print(s1) 2.字符串全部字母大写 s = " ...

  8. _cdecl 与 _stdcall 区别

    前段时间编程时遇到过这么一个问题,我写了一个DLL,把里面的一个函数导出来,然后再定义一个签名与其匹配的函数指针,动态地把这个DLL加载起来(LoadLibrary),得到函数指针后,一调用,结果报错 ...

  9. nodeType介绍及应用示例

    一,DOM中的节点类型介绍 DOM将一份文档抽象为一棵树,而树又由众多不同类型的节点构成. 元素节点是DOM中的最小单位节点,它包括了各种标签,比如表示段落的p,表示无序列表的ul等. 文本节点总是被 ...

  10. 一个完整实用的axios封装

    1.先引入 import axios from 'axios' import qs from 'qs'import router from '../router'; import store from ...