900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > overflow的属性值说明 HTML滚动条的属性 – CSS – 前端 css固定列

overflow的属性值说明 HTML滚动条的属性 – CSS – 前端 css固定列

时间:2019-12-19 21:08:37

相关推荐

overflow的属性值说明 HTML滚动条的属性 – CSS – 前端 css固定列

overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)

scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 scrollbar-face-color立体滚动条凸出部分的颜色 scrollbar-highlight-color滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 86oo精彩教程

@ div层级结构?

1、定位

定位:

1、普通流定位

普通流,又称为文档流

块级元素:从上到下一个一个的排列

行内元素:一行内从左到右的排列

2、浮动定位

1、什么是浮动定位

将元素排除在普通流之外,即脱离文档流

浮动元素不会占据页面空间

浮动元素会放置在"包含框"的左边或右边

浮动元素依旧位于包含框之内

浮动元素可以向左或向右浮动,直到碰见包含框的边缘或另一个已浮动的元素框为止

2、特点

1、浮动元素边缘不会超过其父元素的边缘

2、浮动元素不会重叠

3、浮动只能左右浮动,不会上下浮动

注意:非块级元素浮动的话,那么将会变成块级元素,允许修改 width 和 height

3、处理问题

1、让块级元素在同一行内显示

2、修改行内元素的 width 和 height

4、浮动属性

属性:float

取值:

none

left

right

清除浮动所带来的影响:

属性:clear

取值:left

right

both

5、子级元素的浮动,为父层元素所带来的影响

如果一个元素的所有子级内容都是浮动的,那么它的高度会变成 0

解决方案

1、设置父容器高度

2、设置父元素的 overflow:hidden;

3、在父元素中,增加一个空元素,添加clear:both;

2、显示方式

1、display

none:生成元素没有框,不占据页面空间,隐藏

block:按块级显示

inline:按行内方式显示

inline-block:行内块,所有的元素在一行内显示,允许修改width 和 height

使用场合:

1、控制元素的显示与隐藏

隐藏:display:none;

显示:

块级 :display:block

行内 :display:inline

2、将行内元素变成块级 或 行内块

目的:修改行内元素的宽和高

2、显示效果

1、visibility

可见性

取值:

visible :默认值,可见的

hidden :元素不可见,占据页面空间

collapse :用在表格上

问题:visibility:hidden 与 display:none的区别

2、opacity

透明度

取值:0 – 1

opacity:0.5;

3、vertical-align

垂直方向对齐

td

img

取值:

baseline : 默认,基线对齐

top : 顶部对齐

bottom :底部对齐

middle :居中对齐

放在img 上,控制的是 img 左右两端文本的垂直对齐方式

4、光标

改变鼠标的显示效果

属性:cursor

取值:

default

pointer :小手

crosshair :+

text : I

wait : 等待

help : ?

@ 响应式和自适应的区别?

自适应:

在不同分辨率下不同设备上显示相同的页面。即:根据屏幕的宽度,自动调节网页内容的大小,使其主体内容和布局不变。

响应式:

响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度,多点百分比

(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置

(4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

(5)选择加载css,<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />,这个意思是如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

@ div添加滚动条?

div 加滚动条的两种方法:

一、

<div overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

记住宽和高一定要设置噢,否则不成的

这样比较好的是,在宽和高不超出时,只是一条线

三、说明

直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:

<div>

</div>

如果要出现水平滚动条,则: overflow-x:auto

同理,垂直滚动条为: overflow-y:auto

如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。