zoukankan      html  css  js  c++  java
  • div布局

    <div></div>无意义块状元素标签
    <span></span>无意义行内元素标签
    <p></p>段落标签
    <ul></ul>无序列表
    <li></li>列表项
    <a href=""></a>超链接标签
    <img src="" alt="">图片标签
    <i></i>斜体标签
    <b></b>粗体标签

    id选择器 #id
    类选择器 .class
    关系选择器 div p ,div>p, div,p
    伪类型选择器 hover
    结构性伪类选择器:E:after E:before E:nth-child() E:first-child E:last-child

    页面布局常用的属性
    字体属性 font-size
    文本属性 text-decoration text-align
    首行缩进 text-indent
    行高 line-height
    宽高属性 width height min-height max-height
    背景属性 background
    列表属性 list-style
    字体颜色 color

    页面布局应用属性
    定位属性 position
    布局属性 display
    浮动属性 float clear
    盒子模型 border margin padding
    圆角边框 border-radius
    阴影 text-shadow box-shadow

    浮动定位
    将元素排除在普通流之外
    元素将不在页面中占据空间
    将浮动元素放置在包含框的左边或者右边
    浮动元素依旧位于包含框之内
    浮动的框可以向左或者向右移动,直到他的外边缘碰到包含框或者另一个浮动框的边框为止
    浮动元素的外边缘不会超过其父元素的内边缘
    浮动元素不会互相重叠
    浮动元素不会上下浮动sadplay属性将完全失效均可以设置宽高,并且不会独占一行
    语法: float:none/left

    css清楚浮动:
    描述:清楚浮动是在使用了浮动之后必不可少的,为了网站布局的效果,清楚浮动也变得非常麻烦
    属性:clear
    值: left,right,both
    清除浮动的常用方式:
    1.结尾处加div空标签 clear:both
    2.浮动元素的父级div定义 overflow:hiddin
    3.浮动元素的父级定宽高

    position定位
    position属性制定一个元素(静态,相对的,绝对的或者固定的)的定位方法的类型
    absolute 生成绝对定位的元素,相对与static定位的以外的第一个父元素进行定位
    元素的位置是通过'left''top'等确定
    fixed 生成绝对定位的元素,相对于浏览器窗口进行对位
    元素的位置通过'left'等属性进行规定
    relative 生成相对定位的元素,相对于其正常位置进行定位
    因此,'left:20'会向元素的LEFT位置添加20像素
    static 默认值,没有定位,元素出现在现在正常的流中

    position:relative 这是一个相对定位
    相对定位是以当前为参照物为指定的距离
    被定位的元素会占有原有的物理位置
    绝对定位的元素不会占有原有的物理位置
    元素外层一旦有定位的话,它的参考点就会变化
    如果元素的外层元素没有设置任何position的值,那么这个元素就会寻找距离自己最近的其他设定过position的元素为参考物

    z-index堆叠顺序
    一旦修改了元素的定位方式,则元素可能发生堆叠
    可以使用z-index属性来控制元素框出现的重叠顺序
    z-index仅能在定位的元素上生效
    z-index属性:
    值为数值,数值越大表示堆叠顺序越高,离用户越近
    可以设置为负值,表示离用户远
    z-index仅能在定位元素上奏效

    display属性
    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型
    每一个元素都有默认的display属性值,例如div元素,他的默认display属性值为'block'
    称为元素块,而span元素的默认display属性值为'inline',成为行内元素
    块元素和行内元素是可以相互转换的
    display常见属性值 用visibility : hiddin 可以保留物理位置 opacity:0(设置透明度)也可以
    none:隐藏对象
    inline:指定对象为内联元素
    block:指定元素为块元素
    inline-block:指定对象为内联块元素
    table-cell:指定对象作为表格单元块
    flex:弹性盒

  • 相关阅读:
    VB C# 语法对比图 (代码实例)
    改进了的一个邮件发送类
    什么时候应该使用 ==?什么时候应该使用 Equals?
    c#写的贪吃蛇小游戏
    七招制胜ASP.NET应用程序开发
    SQL Server开发人员应聘常被问的问题汇总
    DataTable中数据记录的统计
    ASP.NET中数据库数据导入Excel并打印
    在.NET中得到计算机硬件信息的一些功能
    C#.NET 中的类型转换
  • 原文地址:https://www.cnblogs.com/SmartCat994/p/12353950.html
Copyright © 2011-2022 走看看