css 中的若干心得
css布局中定位机制主要是普通的流,也就是说按照HTML文本的顺序在窗口上从上到下、从左到右去显示,遇见块级元素就换行显示。为了更进一步的控制,我可以使用相对定位、绝对定位、固定定位以及浮动。
相对定位(position:relative)是相对于自身而言的,但会在原来的地方留出空白,所以不会影响后序的流;可能出现这个元素覆盖到其他元素上的情况发生。百分数表示的宽度相对于父元素的宽度而言的。
绝对定位(position:absolute)会让该元素从流中去掉,其他元素不会再看见它,可以产生覆盖的效果;其定位是相对于离它最近的的非普通流的父元素(position非static)的左上角,否则一直到原始的盒子可能是body。其百分数表示的宽度是源自于其定位元素的宽度的。通常在父元素中使用position:relative;子元素中使用position:absolute;
固定定位(position:fixed):这种定位是相对于浏览器窗口的,百分数表示的宽度也是相对于浏览器窗口的。该元素会从普通流中移除。
这几种都可以设置z-index来改变各部分的相对屏幕位置。而且都可以在块级元素和内联元素上使用。
float:在元素的父元素盒子里尽量向左或是右浮动,文本可以在周围浮动。而且,最好给一些元素加上宽度,否则会出现元素铺满整个盒子的情况发生。
当一个包含元素内只直接包含有一个浮动元素,那么包含元素会被认为高度为0,可以使用overflow:auto;width:100%来改变这种状况。
我们可以设置任何元素的margin,但是要使用margin:0px auto.使某个元素居中则要将这个元素设为块级元素。
关于隐藏:
可以有diplay:none,这样会从流中去掉,可以将一个盒子的visibility:hidden.这样就不会显示盒子了,但盒子会继续占有那个位置,这个和empty-cells:hide的效果是一样的。<input type="hidden">可以隐藏这个控件。
背景关系:从下自上依次是:box-shadow(outer)、background-color、background-image、box-shadow(inset)、border。
一个网站必须要明确主要受众人群,网站主要功能;建立清晰易用的网站。其次,视觉层次很重要,浏览者未必想去翻看网页,他们需要快速找到内容。高视觉对比度就会更易突出线索。其次将相关内容组织起来更加让浏览者明白相应逻辑。其次,应当保持风格的协调、连贯性。借助相似的风格来建立一种默认的印象。
导航要做到:清晰、简洁、精选、连贯、交互好、告知位置。
css已经拥有了80多项规范,这让其变得复杂,即使是w3c工作组css起草专家也难以说精通各方面;css已经形成了自己的开发者圈子、专业的技术会议、框架、工具链。原本看似简单的属性组合在一起之后变得极为复杂。索性的是各大浏览器如今都按照标准来(标准不只是强制的),这样得以按以下原则来设计代码:DRY、可维护、灵活、轻量级。
css 中的若干心得的更多相关文章
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- 问答:怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式?
好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
随机推荐
- 【枚举+小技巧】【TOJ4115】【Find the number】
题目大意 找到一个最小的奇数 约数个数为n 结果mod10^9+7 根据 约数个数=(p1+1)*(p2+1)............ 将n 枚举分解成连乘式.(枚举个数,dfs) 比较大小 log ...
- 【floyed】【HDU1217】【Arbitrage】
题目大意: 给你几种货币,以及几种汇率关系,问是否存在套利的可能? 思路: 初步想法:图上存在一个环的路径上权值相乘大于1.... 再者:该如何找到图上所有环呢.... 好吧 经过鸟神 和 况神的指点 ...
- iOS开发那些事儿(三)JsonKit解析原理
json_parse_it :开始解析,字符串指针从头到尾循环 jk_parse_next_token:获取下个字符的type和length 大部分分隔符长度都是固定1 jk_parse_string ...
- 【Android】Fragment如何获取子Fragment
今天搞了个嵌套的Fragment,通过外部的Fragment获取的子Fragment代码: this.navigationBar = (HXKJCargoNavigationView) getFrag ...
- C#l连接OPC进行数据交互
步骤 :引用 OPCNETAPI.DLL&&OPCNETAPI.COM.DLL 1.查询服务器 2. 连接服务器 3. 读取数据 4.写入数据 1.查询服务器 :根 ...
- oracle11g用户名密码不区分大小写
oracle 11g 以前的版本的用户名和密码是不区分大小写的; oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_log ...
- Linux命令--链接文件的那些事
linux 链接ln的使用 linux操作系统下ln的使用方式: ln [option] source_file dest_file #source_file是待建立链接文件的文件,dest_file ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- Django模板-在视图中使用模板
之前我们已经有了自己的视图mysite.views.py中,应该是这样子的 from django.http import HttpResponse import datetime def curre ...
- js数组(一)
一.创建数组两种方法: 1Array构造 var colors = new Array();2.字面量表示什么事字面量,如 var colors = ["red","gr ...