PPC的C/C++和人工智能学习笔记
每一篇学习笔记,都只是为了更好地掌握和理解

Web前端(5)_CSS(2)

继续学习CSS样式表。

 

Width,Height:宽高

可以用像素表示 width:100px; 也可以用百分比表示width:80%; 百分比表示的是其父级的百分比。

Width:200px; border:1px solid #F00 红色边框 200像素宽。

Width:80%; border:1px solid #003; margin:0 auto; 自适应80%,这里这个margin: auto好像很重要?而且body的margin属性也要auto。

 

min-width,max-width,min-height,max-height:最小最大宽高

最小最大宽度和高度,一般用来限制图片。

 

Border:边框

边框厚度,border-width: 1px

边框样式,border-style: solid

边框颜色,border-color: #000

习惯上这样写:border: 1px solid red 而不区分其细分属性

边框样式值如下:

none :  无边框。与任何指定的border-width值无关

hidden :  隐藏边框。IE不支持

dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)

dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)

solid :  实线边框(常用)

double :  双线边框。两条单线与其间隔的和等于指定的border-width值

groove :  根据border-color的值画3D凹槽

ridge :  根据border-color的值画菱形边框

inset :  根据border-color的值画3D凹边

outset :  根据border-color的值画3D凸边

上面常用的就是solid和dashed。(实线和虚线)

 

边框是分上下左右的:

border-top, border-bottom, border-left, border-right

 

例如:左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。

CSS 代码: border:1px solid #000; border-top:none;

 

 

 

Background:背景

Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。

如:background:#000 url(图片地址) no-repeat left top

 

background-color 设置颜色作为对象背景颜色

background-image 设置图片作为背景图片

background-repeat 设置背景平铺重复方向(No-repeat; x,y都不重复,repeat-x; 只在x重复,repeat-y; 只在y重复)

background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。(fixed 背景固定,scroll 背景图片是随对象内容滚动)

background-position 设置或检索对象的背景图像位置。可以是负值的。

 

CSS background背景作用:

1、设置纯色背景。背景background可以设置对象纯色的背景颜色,

2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

例子:.divcss5 { background: #FFF  url (xxx.gif) no-repeat 5px 6px }

 

Display:显示

Display: none; 隐藏标签,隐藏对象及对象内容。

Display: block; 变成块级标签,会换行。

Display: inline; 变成内联标签,不换行。

 

 

 

Cursor:鼠标显示光标

将鼠标移到到指定标签时,鼠标的显示形状。比如A标签就是一个小手的形状。

比如:Cursor: pointer; 小手

1)、div{ cursor:default }默认正常鼠标指针

2)、div{ cursor:hand }和div{ cursor:text } 文本选择效果

3)、div{ cursor:move } 移动选择效果

4)、div{ cursor:pointer } 手指形状 链接选择效果

5)、div{ cursor:url(图片地址) }设置对象为图片,相当于自定义。

 

cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

 

 

Float:浮动

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

 

例子:

<div style=”width:400px;background:#BBB;”>

<div style=”float:left;width:30%;background:#F00;”>left</div>

<div style=”float:right;width:20%;background:#00F;”>right</div>

<div style=”clear:both;”></div> <!– 这里是清除 –>

</div>

假如定义了float属性,他的父标签就不会被内层撑起来,所以必须在最后面加个clear:both的属性。

 

Position:

Fixed; 固定 针对的是浏览器的窗口。

Absolute; 绝对定位

Relative; 相对定位

 

例子:在浏览器的右下角位置,显示一个“返回顶部”的东西。

<div style=”position:fixed;right:3%;bottom:3%;”>返回顶部</div>

 

Absolute只能1次固定在窗口的某个位置。

所以,一般情况下 absolute 和 relative同时出现。也就是父标签用relative;子标签用absolute属性。这样就是觉得定位在父标签里面了。

 

 

Z-index, opacity:CSS透明度和层级:

Z-index越大越在前面,需要使用position: absolute;绝对定位才能显示层级效果。

Opacity:0.4; 0-1之间,0就是全显示出来,1就全部黑掉了。(chrome写法)

Filter:alpha(opacitu=40); (IE8以上写法)

 

 

Margin:外边距

就是div和div之间的距离。(两个标签之间的距离)

 

margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px)

margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px)

margin-top 对象上边外延边距 (margin-top:5px; 上边外延距离5px)

margin-bottom 对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)

 

1、只有上下情况缩写

原始:margin-top:5px; margin-bottom:6px

缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情况缩写

原始:margin-left:5px; margin-right:6px

缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三边情况缩写

原始:margin-top:5px; margin-bottom:6px; margin-left:4px

缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四边相同值缩写

原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px

缩写:margin:5px;

5、四边不同值缩写

原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px

缩写:margin:5px 8px 6px 7px;

6、四边其中上下值和左右值各相同缩写

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px

缩写:margin:5px 7px;

 

marign:0 auto;

即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。

 

Padding:内边距

基本用法和margin差不多。

 

四边不同padding简写:

padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

简写为:

Padding:40px 30px 50px 20px;

注意每个数值后一个空格间隔隔开,次序是 上 右 下 左。

 

 

 

 

 

 

 

 

(2017-05-07 www.vsppc.com)

学习笔记未经允许不得转载:PPC的C/C++和人工智能学习笔记 » Web前端(5)_CSS(2)

分享到:更多 ()

评论 70

评论前必须登录!