CSS区块、浮动、定位、溢出、滚动条

  • CSS中区块的使用

  • CSS中浮动的使用
  • CSS中定位的使用
  • CSS中溢出的使用
  • CSS中滚动条的使用

17.1 CSS中区块的使用

属性名称            属性值                说明

width              像素/百分比            区块的宽度

auto

height              像素/百分比            区块的高度

auto

min-height            像素/百分比             区块最小高度

auto

max-height            像素/百分比             区块最大高度

auto

min-width             像素/百分比             区块最小宽度

auto

max-width          像素/百分比             区块最大宽度

auto

17.2 CSS中浮动的使用

属性名称            属性值                说明

float                none                正常显示

left                 左浮动

right                右浮动

clear                none                允许两边浮动

left                不允许左边浮动

right                不允许右边浮动

both                不允许两边浮动

17.3 CSS中定位的使用

属性名称            属性值                说明

position            relative        设置区块基准点为左上角

absolute        设置网页的为基准点左上角

static                无设置

             left                auto                 以基准点定位在左边

像素/百分比            定位在左边

top                 auto                以基准点定位在上边

像素/百分比           定位在上边

right               auto                以基准点定位在右边

像素/百分比           定位在右边

bottom              auto                以基准点定位在下边

像素/百分比           定位在下边

z-index             auto                  自动调整高度

数字                数字越大越往上层

17.4 CSS中溢出的使用

属性名称            属性值                说明

overflow            visible              不剪切内容也不添加滚动条

auto                 在必需时对象内容才会被

裁切或显示滚动条

hidden                不显示超过对象尺寸的内容

scroll                总是显示滚动条

overflow-x            (同上)

overflow-y            (同上)

17.5 CSS中滚动条的使用

属性名称                        属性值                说明

scrollbar-3dlight-color        颜色/十六进制        滚动条亮边框

scrollbar-highlight-color      颜色/十六进制        滚动条3D界面亮边

scrollbar-face-color           颜色/十六进制        滚动条3D表面

scrollbar-arrow-color          颜色/十六进制        滚动条方向箭头

scrollbar-shadow-color         颜色/十六进制        滚动条3D暗边

scrollbar-darkshadow-color     颜色/十六进制        滚动条暗边框

scrollbar-base-color                    颜色/十六进制        滚动条基准颜色

scrollbar-track-color           颜色/十六进制        滚动条的拖动区域

时间: 2024-08-06 12:11:26

CSS区块、浮动、定位、溢出、滚动条的相关文章

(三)css之浮动&定位

众所周知,一个页面可能包含多个div,如何对这些div进行排列,以便具有较好的显示效果呢? css提供了浮动和定位两个属性进行div的排列,下面主要针对浮动和定位进行详细地阐述. (一)何为浮动? 浮动即是让div块向左或者向右靠拢,向左浮动(float:left);向右浮动(float:right). 向左或者向右浮动时,当浮动块碰到前一个块或者边框时,则停止浮动. 例如:1.向左浮动 想左浮动,即是div块向左边移动,直到div块碰到左边框或者另一个div块,如上图右侧所示,代码如下 htm

css 清除浮动 定位 z-index属性

当一个父元素包含多个浮动的子元素的时候,子元素的浮动确定了他们的位置,但是子元素不会影响父元素的宽度,使父元素塌陷,从而使父元素高度为0,这个时候可以为父元素清除浮动,从而阻止父元素塌陷. 1.overflow方法 对父元素设置overflow:hidden: 但是overflow清除浮动会有一些缺点. 2.clearfix方法 清除浮动更好的方法是clearfix "clearfix"技巧是基于在父元素上使用":before"和":after"

CSS—DIV浮动定位 消除影响

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>消除浮动影响</title><style type="text/css"> #d0,p{ border: 1pX solid red; width: 400PX; } #d1,#d2,#d3{ width:100px; height: 100PX; margin: 10PX

CSS3的区块浮动

CSS区块浮动 这种块移动直到该区块的外边缘碰到碰到它的区块边框或浮动区块为止 1.浮动的设置 在CSS中可以使用float属性设置区块框向左或向右浮动 代码 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset = "UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #one

CSS文档定位:浮动

浮动的特点   浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing block)的边缘或者另外一个浮动元素的外边缘,因此浮动元素是不会浮动到中间的. 如果没有足够的水平空间让浮动元素占据,浮动元素将向下移动,直到下方空间足够容纳或者下方已经没有浮动元素. 因为浮动已经脱离普通流,所以非定位的非浮动块级元素会表现得浮动元素没有存在一样,但是inline box元素(包括普通

Css3之基础-8 Css 浮动(定位,浮动定位)

一.CSS 定位概述 定位概述 - 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置 - 普通流定位 - 浮动定位 - 相对定位 - 绝对定位 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中(比如<p>元素.<div>元素) - 元素框之间的垂直距离是由框的垂直外边距计算出来的 - 内联元素将在一行中从左到右排列水平布置 - 不需要从新行开始 - 可以使用水平内边距.边框和外边

CSS彻底研究(3)-浮动,定位

CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则 准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&qu

DIV+CSS区块框浮动设计

在页面布局的时候,可以用绝对定位来实现,但是由于调整某个区块框时其他区块的位置不会相应的改变,所以这并不是布局的首选方式.但是使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动狂的边框为止.并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现的像就浮动框不存在一样. 这篇文章就总结几种简单的区块框浮动的例子: 1.不浮动区块框排序 <html> <head> <title>DIV+CSS</title> <s

CSS中的定位与浮动

CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b