font-weight:boldtext-align:left文字加粗,左对齐
font-size:2.5rem字体大小2.5rem(rem是单位)
margin-bottom:1rem下边距1rem
text-decoration:none清除默认样式,下划线取消
grid-column: span 4元素的文本分成4列。
跟框架没什么关系lz的 overflow-y:204px是个无效属性 可以去掉了..
#view .list{
padding-bottom:2px
border:#AEDEF2 1px solid
border-top:none
margin-bottom:7px
min-height:20px
max-height:200px
overflow-y:auto
/*overflow-y:204px*/
overflow-x:hidden
width:704px
}
这样 在firefox IE7下均通过
唯独IE6 ....该死 不支持min-height,max-height属性
必须用js来实现
下载
http://www.doxdesk.com/file/software/js/minmax.js
然后在
在head区域添加 <script type="text/javascript" src="[path to minmax.js]"></script>就可以了
[path to minmax.js] 表示minmax.js的路径 别写错了哦
以上统统测试通过 FF2 FF3 IE7 IE6 IE5 Opera8
css中允许多个class:
<h1 class="green bold">... </h1>。
举例:如果同时有一个p元素和一个h1元素下都有一个 class = uppercase ,那么可以通过在类名前添加它的父类来加以区分:
注意:两个元素之间没有空格。(类似的, background-image: url(图片地址) ,url和后面的括号之间也不能有空格)
想要设置 <li>... </li> 的css样式,可以通过嵌套元素的设置方法设置:
同时选中:
通过用逗号分隔 .h1 和 .menu , 这两个类都会被相应的css格式修饰。
CSS declarations are structured into property and value pairs.
CSS语句都是属性和值相对应的结构。
font-family 定义了元素的字体。
font-size 控制文字显示的大小。
font-weight 定义文字的粗细程度。
text-align 属性控制文字的对齐方式,可以取的分别为: left , right , center 。
文字可以有两种颜色属性:前景色—— color 和背景色—— background-color 。 color 控制文字的颜色, background-color 控制文字的背景色。
CSS中可以用 opacity 属性来令某个元素透明。
CSS中也可以通过 background-image 属性来设置某个元素的背景为一张图片。
除了颜色、边框样式、边框大小之外,还可以调节边框的圆角大小,单位也是 px :
可以分别声明padding-top、padding-right、padding-bottom以及padding-left的值。
同时也可以直接声明 padding: 3px 4px 5 px 6px ,顺序分别是上、右、下、左。
使用上面这种写法时,所有边的padding数值都必须写明。
不过,如果上下、左右的padding值是相等的,也可以写作:
padding: 5px 10px ,这代表上下的padding都是5px,而左右的padding都是10px。
margin和padding类似,也有 margin-top 、 margin-right 、 margin-bottom 、 margin-left 。
同样可以写作
margin: 10px 20px 10px 2opx或者 margin: 10px 20px,表示上下边距为10px,左右边距为20px。
margin的叠加有一点特殊:
水平方向的叠加就是简单的数字叠加。例如,如果左边盒子 margin-right = 10px,而右边盒子的 margin-left = 20px,那么这两个盒子放置在一起时,他们交界处的 margin= 10 + 20 = 30px。
而竖直方向的情况则有所不同,对于叠放的两个盒子,如果上面盒子的 margin-bottom = 30px,而下面盒子的 margin-left = 20px,则交界处的 margin值 为:30px。
利用margin实现居中对齐:
首先需要父元素有固定的 width 或者 height 。比如如果想要让 div1 实现横向居中对齐,首先应该设置其父元素 div0 的 width= 400px ,然后在 css文件 中设置div1的margin值为: margin: 0 auto
被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围,此时可以通过设置overflow的值来进行调整。
overflow的值可以为: scroll 、 hide 、 display 。
可以利用 display 属性来设置HTML元素的显示方式。
可以设置为: none , block , inline-block , inline 。
none 表示元素不显示;
block 表示显示为块级元素;
inline 表示显示为行内元素;
inline-block 表示显示为行内块级元素。
块级元素和行内块级元素可以设置 width height 属性,
而行内元素则不能。
注:一旦给元素加上absolute或float就相当于给元素加上了 display:block。
1. static属性:
static是html元素的默认position值,也就是按照正常的文档流排列。
2. fixed属性:
fixed的效果参见各种定在网页上的广告。
3. relative属性:
relative的元素是相对于自己的default position来定位的。
3.1 默认情况下:
可以看到与默认情况并无区别,
这是因为没有指定目标HTML元素相对其default position的偏移量。
结果:
结果:
结果:
结果:
通过float属性,可以使HTML元素脱离正常的文档流,竖直方向上将不再占用文档的空间,不过水平方向上不变。
比如可以利用这一特性,让序列横向排列:
HTML文件:
CSS文件:
默认情况下的结果:
利用float属性来ul元素横向排列:
结果:
此时只需要设置一下backPanel的height即可:
比如现在 ul元素 都没有父元素包裹了,上面只有一个 <p></p>元素,float之后的 ul元素 并不会“飞到”文档顶端去:
css中的color从类型上可以分为 color (前景色) 和 background-color :
效果:
举例:
结果:
font-family: 字体名称
font-weight: bold | normal
也可以用数值来表示,数值的范围为[100, 900]且必须是100的整数倍。
举例:
font-style: italic ——斜体;
text-transform: uppercase | lowercase
text-align: left | right | center
举例:
以上CSS语句的意思是:
注:
相对应地,也存在 非衬线字体 : sans-serif fonts
grid-template-columns: 100px 200px的意思是:将此网格分为两列。
其中,第一列的width = 100px,第二列的width = 200px。
宽度的单位也可以不是 px ,可以用 百分数 表示:
上面grid的宽度是1000px, 所以第一列的宽度是1000 * 20% = 200px;同理,第二列的宽度是500px。
也可以混用 px 和 % :
这3列中,第一列width为20px,第二列为100 * 40% = 40px,第三列width为60px。
注意: 也就是说,总宽度20 + 40 + 60 = 120px,超过了100px,元素会超出grid的界限。
与定义 grid columns 是类似的:
结果:
结果:
通过单位 fr ,我们可以将行和列定义为对grid的length和width的划分——作用类似于 % ,但是用 % 是有超出父容器边界的风险的,而用 fr 则不用担心,因为浏览器会自动对grid进行划分。
如果行高或列宽相等,可以用 repeat() 函数来简化语句:
结果:
.grid {
display: grid
grid-template-columns: 100px minmax(100px, 500px) 100px
}
结果:
行间距同理:
grid-row-gap: 10px
同时设置行、列间距:
grid-gap: 20px 10px —— 一句话,分别设置行间距为20px,列间距为10px。
注:
这一简写形式并不需要 / ,如果只提供了一个值,比如: grid-gap: 10px,则相当于 grid-gap: 10px 10px。
简写形式:
同理,
同样,也可以写作:
span 可以明确地指出希望行或列跨越的距离:
比如,如果想要row从第4行开始,占两行,就可以直接写作:
不用 grid-row 的简写形式,也可以写作:
当然, span 也可以用在 grid-row-start 之后,浏览器会自动为我们计算出结果:
结果:
可以用一句话声明一个item占grid的多少行、列,并限定它在grid中的具体位置。
结果:
利用这个属性,可以先做出一个模板,然后让各个元素分别去“认领”他们所占的行和列。
比如 container 下面有5个板块:
注:
图中的grid是四行两列的,当header 和 header并列时,表示header占两列,此时header将占据整行,即使存在grid gap,依然不会将两个header分隔开。虚线只是为了便于理解,实际并不存在。
设置grid元素在每个格子中水平方向上的 对齐方式 。
justify-items 属性可以接收的值为:
注:这个属性是container中的,而不是每个item的。
设置grid元素在每个格子中竖直方向上的 对齐方式 :
同样可以接收以下值:
注:这个属性是container中的,而不是每个item的。
设置整个grid在其父容器中,水平方向上的对齐方式:
可以取的值为:
同理,利用 align-content 属性可以设置整个grid在其父容器中,竖直方向上的对齐方式。
原理均与 justify-content 属性相似,不再赘述。
利用 justify-self 、 align-self 属性,可以分别设置grid的每个格子中,具体某个item在水平、竖直方向上的对齐方式。