图解CSS(7)：大小、定位、剪切、滚动条

width
height
max-width
max-height
min-width
min-height
position - top、right 、bottom 、left
z-index
clip
overflow(overflow-x、overflow-y)
scrollbar-base-color
scrollbar-face-color
scrollbar-track-color
scrollbar-arrow-color
scrollbar-shadow-color
scrollbar-darkshadow-color
scrollbar-highlight-color
scrollbar-3dlight-color

width、height:

max-width、max-height、min-width、min-height, 这需要指定 DocType 为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

时才有效(为什么? 暂时不知道; 包含 DocType 时, 用我这个小工具得手动刷新.).

position:

static(默认自动)、 absolute(绝对定位)、 relative(相对定位) 、 fixed(绝对定位且不随滚动条滚动; 要使 fixed 的定位方式有效, 还得像上面一样指定 DocType).

z-index:

clip: rect(上 右 下 左); 值为 auto 是不剪切; 指定 position: absolute 时才有效.

时间： 2024-09-19 09:12:45

图解CSS(7)：大小、定位、剪切、滚动条的相关文章

CSS制作网页实例:改变滚动条的样式

文章简介:相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式

easyui datagrid如何同时实现自适应大小和垂直滚动条？

问题描述 easyui datagrid如何同时实现自适应大小和垂直滚动条? 1.easyui datagrid设置自适应但是不能显示垂直滚动条? table元素设置fit="true",表格面板就可以自适应大小,也就是充满父容器的大小.但是这个时候无论如何都不能让datagrid出现滚动条了. 2.或者,设置宽度和高度可以显示滚动条但是又不能自适应? table元素设置固定的的宽度和高度(比如,style="width:600px;height:400px"),就

css控制文字长度:css 控制文字定位

以下内容为程序代码  <style>    p.double {line-height: 2}    p.right {text-align: right}    p.center {text-align: center}    p.justify {text-align: justify}    p.indent {text-indent: 1cm}    p.capitalize {text-transform: capitalize}    p.up {text-transform: u

实例详解网页制作中CSS元素的定位应用

css|网页|详解 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 {  position:static; } 2. position:relative|相对定位 使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置. 如果要让div-1层向下移动20px,左移40px: example: #div-1

CSS教程——元素定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example:#div-1 { position:static;}2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example:#div-1 { position:r

CSS文字大小单位PX、EM、PT

  这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字 体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为: 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位; 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE

css文字大小单位px、pt、em 使用说明

老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为: 1. IE无法调整那些使用px作为单位的

CSS绝对定位固定定位详解

 绝对定位 的元素基于最近的 position 为 relative/absolute/fixed 祖先元素进行定位.如果没有找到 position 为 relative/absolute/fixed 的元素,则基于是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准,以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形进行定位, 并不是基于根元素定位 . 固定定位 的元素基于viewport(浏览器视窗)进行定位. 1. 绝对定位 和 固定定位 的元素

css实现菜单列表随滚动条指定到对应内容

最近写了一个新闻页面,要求列表底部5px的蓝色边框随滚动条的变化对应到指定的内容,同时列表下边框也随着变化,先给大家看下效果图样式   2.编写代码 <div class="page-news-nav"> <ul class="news-nav-ul"> <li class="news-nav-li "><a href="#" class="news-nav-word nav