css如何设置滚动条方向

html-css020

css如何设置滚动条方向,第1张

没有水平滚动条:style="overflow-x:hidden"

没有垂直滚动条:style="overflow-y:hidden"

补充:代码贴上来看看

用CSS控制滚动条样式

1,Overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置

overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。

hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。

scroll 无论内容是否超越范围,都将显示滚动条。 auto 当内容超出范围时,显示滚动条,否则不显示。

应用:

没有水平滚动条:

<div style="overflow-x:hidden">test</div>

没有垂直滚动条 :

<div style="overflow-y:hidden">test</div>

没有滚动条 :

<div style="overflow-x:hiddenoverflow-y:hidden" 或

style="overflow:hidden">test</div>

自动显示滚动条:

<div style="height:100pxwidth:100pxoverflow:auto">test</div>

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {

scrollbar-arrow-color: #f4ae21 /*图6,三角箭头的颜色*/

scrollbar-face-color: #333 /*图5,立体滚动条的颜色*/

scrollbar-3dlight-color: #666 /*图1,立体滚动条亮边的颜色*/

scrollbar-highlight-color: #666 /*图2,滚动条空白部分的颜色*/

scrollbar-shadow-color: #999 /*图3,立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: #666 /*图4,立体滚动条强阴影的颜色*/

scrollbar-track-color: #666 /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8 /*滚动条的基本颜色*/

Cursor:url(mouse.cur) /*自定义个性鼠标*/}

以上2项适用与<body>、<div>、<textarea>、<iframe>

1.网络中使用最多的图片格式有哪些

JPEG,GIF,PNG,最流行的是 jpeg 格式,可以把文件压缩到最小 在 ps 以

jpeg 格式存储时,提供 11 级压缩级别

2. 请简述 css 盒子模型

一个 css 盒子从外到内可以分成四个部分:margin(外边距),border

(边框),padding(内边距),content(内容)。默认情况下,盒子的

width 和 height 属性只是设置 content(内容)的宽和高,

盒子真正的宽应该是:内容宽度+左右填充+左右边距+左右边框

盒子真正的高应该是:内容高度+上下填充+上下边距+上下边框

3. 视频 / 音频标签的使用

视频:

视频标签属性:

src 需要播放的视频地址

width/height 设置播放视频的宽高,和 img 标签的宽高属性一样

autoplay 是否自动播放

controls 是否显示控制条

poster 没有播放之前显示的展位图片

loop 是否循环播放

perload 预加载视频(缓存)与 autoplay 相冲突,设置了 autoplay 属

性,perload 属性会失效。

muted 静音模式

音频: 音频属性和视频属性差不多,不过宽高和 poster 属性不能用

4.HTML5 新增的内容有哪些

新增语义化标签

新增表单类型

表单元素

表单属性

表单事件

多媒体标签

5.Html5 新增的语义化标签有哪些

语义化标签优点:1.提升可访问性 2.seo 3.结构清晰,利于维护

Header 页面头部 main 页面主要内容 footer 页面底部

Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容

Section 相 当 于 div

figure 加 载 独 立 内 容 ( 上 图 下 字 )

figcaption figure 的标题

Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签(必须

配合 open 属性)

Embed 加载插件的标签 video 加载视频 audio 加载音频(支持格式

ogg,mp3,wav)

6.Css3 新增的特性

边框:

border-radios 添加圆角边框

border-shadow:给框添加阴影 (水平位移,垂直位移,模糊半径,阴

影尺寸,阴影颜色,insetr(内/外部阴影))

border-image:设置边框图像

border-image-source 边框图片的路径

border-image-slice 图片边框向内偏移

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量

border-image-repeat 图像边框是否平铺(

repeat 平铺 round 铺满

stretch 拉伸)

背景:

Background-size 背景图片尺寸

Background-origin规定background-position属性相对于什么位置定

Background-clip 规定背景的绘制区域(padding-box,border-box,

content-box)

渐变:

Linear-gradient()线性渐变

Radial-gradient()径向渐变

文本效果:

Word-break:定义如何换行

Word-wrap:允许长的内容可以自动换行

Text-overflow:指定当文本溢出包含它的元素,应该干啥

Text-shadow:文字阴影(水平位移,垂直位移,模糊半径,阴影颜色)

转换:

Transform 应用于 2D3D 转换,可以将元素旋转,缩放,移动,倾斜

Transform-origin 可以更改元素转换的位置,(改变 xyz 轴)

Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D 转换方法:

rotate 旋转 translate(

x,y)指定元素在二维空间的位移 scale(

n)

定义缩放转换

3D 转换方法:

Perspective(

n)为 3D 转换 translate rotate scale 过渡:

Transition-proprety 过渡属性名

Transition-duration 完成过渡效果需要花费的时间

Transition-timing-function 指定切换效果的速度

Transition-delay 指定什么时候开始切换效果

动画:animation

Animation-name 为@keyframes 动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动画

7. 清除浮动的方式有哪些?请说出各自的优点

高度塌陷:当所有的子元素浮动的时候,且父元素没有设置高度,这时

候父元素就会产生高度塌陷。

清除浮动方式 1:给父元素单独定义高度

优点:快速简单,代码少 缺点:无法进行响应式布局

清除浮动方式 2:父级定义 overflow:hidden;zoom:1(针对 ie6 的

兼容)

优点:简单快速、代码少,兼容性较高 缺点:超出部分被隐藏,布局时

要注意

清除浮动方式 3:在浮动元素后面加一个空标签,clear:both;height:

0;overflow:hidden

优点:简单快速、代码少,兼容性较高。

缺点:增加空标签,不利于页面优化

清除浮动方式 4:父级定义 overflow:auto

第 5 页 第 6 页

优点:简单,代码少,兼容性好

缺点:内部宽高超过父级 div 时,会出现滚动条

清除浮动方式 5:万能清除法:

给塌陷的元素添加伪对象

.father:after{

Content:“随便写”;

Clear:both;

display:block;

Height:0;

Overflow:hidden;

Visibility:hidden

}

优点:写法固定,兼容性高

缺点:代码多

8. 定位的属性值有何区别

Position 有四个属性值:relative absolute fixed static

Relative 相对定位 不脱离文档流,相对于自身定位

Absolute 绝对定位,脱离文档流 相对于父级定位

Fixed 固定定位,脱离文档流,相对于浏览器窗口定位

Static 默认值,元素出现在正常的流中

9. 子元素如何在父元素中居中

水平居中: 第 7 页

1.子父元素宽度固定,子元素设置 margin:auto,并且子元素不能设置

浮动,否则居中失效

2.子父元素宽度固定,父元素设置 text-align:center,子元素设置

display:inline-block,并且子元素不能设置浮动,否则居中失效

水平垂直居中:

子元素相对于父元素绝对定位,子元素 top,left 设置 50%,子元素

margin-top 和 margin-left 减去各自宽高的一半

子元素相对于父元素绝对定位,子元素上下左右全为 0,然后设置子元素

margin:auto

父元素设置 display:table-cell vertical-align:middle,子元素设置

margin:auto

子元素相对定位,子元素 top,left 值为 50%,transform:translate

-50%,-50%)

子元素相对父元素绝对定位,子元素 top,left 值为 50%,transform:

translate(

-50%,-50%)

父元素设置弹性盒子,

display:flex; justfy-content:center ;align-item:center;

justfy-content:center

10.Border-box 与 content-box 的区别

Content-box 标准盒模型 width 不包括 padding 和 border

Border-box 怪异盒模型 width 包括 padding 和 border 第 8 页

11. 元素垂直居中

1.设置子元素和父元素的行高一样

2.子元素设置为行内块,再加 vertical-align:middle

3.已知父元素高度,子元素相对定位,通过 transform:

translateY(

-50%)

4.不知道父元素高度,子绝父相,子元素 top:50%,transform:

translateY(

-50%)

5.创建一个隐藏节点,让隐藏节点的 height 为剩余高度的一半

6.给父元素 display:

table,子元素 display:

table-cell,vertical-align:

middle

7.给父元素添加伪元素

8.弹性盒,父元素 display:flex,子元素 align-self:center

链接:https://www.waimaiguai.com/technology/article/5866382

来源:外卖怪