笔记 - 10.3、HTML - CSS样式笔记2

简介: 6.定位属性:     使用定位可以控制元素的位置,包括相对定位和绝对定位两种方式,相对定位是指允许元素相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档的布局分离且任意定位。 --- position:定位     取值:         static:默认值,没有定位。         absolute:绝对定位,相对与最近的已经定位的父元素,通过设置一定的
6.定位属性:
    使用定位可以控制元素的位置,包括相对定位和绝对定位两种方式,相对定位是指允许元素相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档的布局分离且任意定位。
--- position:定位
    取值:
        static:默认值,没有定位。
        absolute:绝对定位,相对与最近的已经定位的父元素,通过设置一定的偏移量,来进行定位。(已经定位的付元素:是指position属性已经设置为relative或者是absolute)
        relative:相对定位,相对与自身原来的距离,通过设置一定的偏移量,来进行定位。
        fixed:固定定位(绝对定位的一种),将一个元素固定在浏览器的某一个位置,无论页面如何变化,这个元素始终保持在浏览器的这个位置。

--- top、bottom、left、right,元素位置。分别表示上、下、左、右四个方向的偏移量。
    这四个属性需要配合position属性一同使用,但是只有当position属性的值为absolute、relative、fixed时,这四个属性才能起作用,否则将无效。
    通常设置两个方向的偏移就可以控制元素的位置。
    取值:一个长度值或者是百分比。


7.层叠顺序:
    使用层叠顺序可以设置层的先后顺序和覆盖关系。
--- z-index:
    取值:一个整数值,可以是负数。默认值是1,表示该层位置最底层。


8.浮动属性:
    常用来对块级标签进行浮动,使块级标签能够改变它原来的排列方式为从左到右的排列。浮动的元素将会脱离标准文档流。
--- float:浮动
    取值:
        none:没有浮动
        left:左浮动
        right:右浮动
--- clear:清除浮动。(如果之前的元素使用的浮动,会影响到之后的元素的排列,那么就需要清除浮动。)
    取值:
        none:默认值,不清除浮动。
        left:清除左边的浮动。
        right:清除右边的浮动。
        both:清除左右两边的浮动。
--- 标准文档流:(*****)
    HTML标签分为两种,一种是块级标签,另一种是行级标签。
        块级标签:默认排列方式是从上到下的排列,每个块级标签在页面中独占一行。
        行级标签:默认排列方式是从左到右的排列,每一个行级标签在页面不会独占一行,直到将一行占满,才会换行。
    常见的块级标签有:<div> <p> <h1>~<h6> <table> 列表标签等。
    常见的行级标签有:<a> <span> <b> <strong> <font> 等。

9.可视区域,(就是可以看得到的区域),可以将一个元素进行裁切,裁切出来的是一个矩形,显示在页面上的就是这一个矩形。使用时,首先要设置开始裁切的开始坐标(可以通过left属性和top属性来设置)
--- clip:
    取值:
        auto:默认值;
        rect(top right bottom left)
            ----| 值rect:
                ----| top right bottom left,分别表示上右下左的顺序提供自对象左上角(0,0)坐标到计算的四个偏移数值,其中任意一个都可以用auto来替换,用auto来替换则表示该边不裁切。
    注意:使用该属性,必须设置该元素为绝对定位(position属性的值为absolute或者是fixed),通过设置一定的偏移量left、top来设置裁切的开始坐标。
    例:
    img {
        position:absolute;
        left:20px;
        top:20px;
        clip:rect(auto 100px 100px auto);
    }
    上述CSS表示将图片从左上角(0,0)开始裁切,横着切到距左边100px的位置,从顶部开始竖着切到距顶部100px的位置,那么就是从(0,0)点切到(100,100)这个坐标为止。
    再如:rect(auto 60px 30px auto)表示从(0,0)切到坐标(60,30)

10.层的宽度和高度
--- width:宽度
    取值:一个长度值或者百分比。
--- height:高度
    取值:只能是一个长度值,不能是百分比。

11.超出范围(溢出<overflow>)
    使用overflow属性可以设置当层内的内容超出层所能容纳的范围时,该层内内容的显示方式。
--- overflow:
    取值:
        visible:默认值,层的大小和内容都会自动显示出来;
        auto:表示只在内容超出层的范围是才显示滚动条;
        hidden:表示会隐藏超出层范围的内容;
        scroll:表示无论层的内容是否超出层的范围,总是会显示滚动条。

12.可见属性(visibility):
    visibility属性是针对嵌套层的设置,嵌套层是插入在其他层里面的层,分为嵌套层和被嵌套层。
--- visibility:
    取值:
        inherit:表示继承父对象(被嵌套层)的可见性,就是父对象可见,它就可见。
        visible:表示无论父对象是否可见,子层都是可见的;
        hidden:表示无论父对象是否可见,子层都是隐藏的。

13.列表(无序列表、有序列表)属性,只对列表属性有作用:
--- list-style-type:列表的项目符号:
    取值:
        disc:默认值,实心圆;
        circle:空心圆;
        square:实心方块;
        decimal:阿拉伯数字;
        lower-roman:小写罗马数字;
        upper-roman:大写罗马数字;
        lower-alpha:小写英文字母;
        upper-alpha:大写英文字母;
        none:不使用任何项目符号或编号。

--- list-style-image: 图像符号,可以使用一张图片来作为列表的项目符号。
    取值:
        url(图片路径):表示使用一张图片来作为项目符号;
        none:不使用图片,默认值。
    经验:使用list-style-image虽然可以用图片设置列表项目符号,但是通常项目符号的位置不能精确的调整,实际做网页的时候通常都是用背景图片的方式来设置项目符号,能达到同样的效果,并且使用背景图片可以准确的调整图片的位置。所以list-style-image属性不推荐使用。

--- list-style-position:列表缩进,可以设置列表缩进的程度。
    取值:
        outside:表示列表项目符号标记在文本以外,且环绕文本不根据标记对齐。
        inside:表示项目符号放置在文本以内,且环绕文本根据标记对齐。

--- list-style:列表的符合属性,整合了list-style-type、list-style-image、list-style-position这三个属性。
    注意:
        当list-style-image和list-style-type都同时被设置的时候,list-style-image将优先于list-style-type显示,除非是list-style-image设置为none或者是指定的图片路径错误,就是图片不能正常显示时,才会显示list-style-type设置的列表样式。
    取值:
        image postion type
        image对应图片路径;
        position对应背景位置;
        type对应列表项目符号。
        可以不全部设置,可以只设置一个或者两个或者全部。

14.鼠标样式属性(cursor):可以设置鼠标移动到元素上时鼠标指针显示的形状。
--- cursor:
    取值:
        default:客户端平台(比如Windows)的默认光标,通常是一个箭头;
        pointer:一个竖起一个指头的手型;
        crosshair:简单的十字线光标;
        text:大写字母I的形状;
        help:带有问号的箭头;
        wait:用于标识程序忙用户需要等待的光标;
        e-resize:向东的箭头;
        ne-resize:向东北的箭头;
        n-resize:向北的箭头;
        nw-resize:向西北的箭头;
        w-resize:向西的箭头;
        sw-resize:向西南的箭头;
        s-resize:向南的箭头;
        se-resize:向东南的箭头;
        auto:默认值,浏览器根据当前情况自动确定光标形状。   
目录
相关文章
|
13天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
21 0
|
4天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
8天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
17 1
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
前端开发
|
15天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
3月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
35 1
|
11月前
|
前端开发 开发工具
零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧
零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧
|
11月前
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
164 0