zoukankan      html  css  js  c++  java
  • 列表属性 边框 浮动 盒模型开头

    列表属性:

    list-style-type:;

    属性值:

    square   cirde    disc   none

    list-style-imageurl()把图片当做列表符号显示

    list-style-position

    属性值:

    Insiad   outinsiad

    重点:list-stylenone;  去掉列表符号

    边框属性:

    border1px solid blue;复合式写法

    1,拆分出来

    border-width1px

    border-stylesolid;(实线)

    border-colorbule

    以上三个属性最多每个增加是个属性值

    一个属性值的时候是:四周

    二个属性值的时候:上下  左右

    三个属性值的时候: 左右  

    四个属性的时候:        

    线型:solid(实线)  dashed(虚线) dotted(点状线) bouble(双线) none(清除)

    边框长在什么位置

    边框长在元素宽高之外的

    怎么给单一一个方向添加边框

    border-left10px solid bule

    border-right:;

    border-top:;

    border-bottom:;

    扩展:透明色:

    transparent  

    当边框没有颜色的时候根据当前容器里面的color的颜色值进行显示

    背景属性

    background:;

    1,背景颜色:background-color:;

    2,背景图:(背景图不占据空间):background-imageurl(图片路径)

    背景图默认的显示状态:

    A,容器大于背景图尺寸:直到铺满为止

    B,容器等于背景图时:只能显示一张

    C,容器小于背景图尺寸:只显示容器区域

    控制背景图是否平铺

    Background-repeat:;

    属性值:

    no-repeat  不平铺

    repeat  平铺

    repeat-x  横向平铺

    repeat-y  纵向平铺

    背景图的位置:

    background-position:;

    属性值:

    水平方向 left  right  center

    垂直方向 top  bottom

    left-10px(往左走10px)  top-10px(往上走10px

    背景图的固定:background-attachment:;

    属性值:fixed(固定) scroll(滚动)

    注:简写:background:背景颜色 rul(背景图) 是否平铺 背景位置

    backgroundred url./img/1.pngno-repeat center

    浮动:

    属性:float:;

    属性值:

    left(往左浮动)   right(往右浮动)  none(清除)

    特点:脱离布局流不占据空间

    注意事项:

    1,浮动的元素,不占据空间

    2,如果想让多个元素横向排列

      A,对个元素必须都添加浮动

      B,添加浮动的元素外层必须有个父元素存在

    3,当浮动的盒子整个宽超出父元素的时候,后面的元素会被挤到下一行

    4,当子元素有浮动的时候,父元素必须有高度,否则父元素会出现“高度坍塌”

    Css的继承性

    控制文本的都有继承性

    盒模型:

    是网页的基石,盒模型控制着网页中的元素之间的位置

    盒模型构成:从里到外:内容区  内填充 边框 外边距

    padding的用法:

    1,padding是长在内容和盒子之间的 在盒子里面

    2,padding作用:控制内容在盒子里面的位置关系

    3,padding会把盒子撑大

    4,如果想让盒子在有padding的情况下,保持原来大小,需要在宽高的基础上,减掉padding

    5,给单一一个方向添加padding的值

    padding-left:;

    padding-right:;

    padding-top:;

    padding-bottom:;

    6,padding、属性值的设置技巧

    padding10px;四周都是10px

    padding10px 20px; 上下10px   左右20px

    padding10px 20px 30px 10px   左右20px  30px

    padding10px 20px 30px  40px 10px 20px 30px 40px

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    webstorm创建和搭建vue项目
    win10企业版激活方法
    Jquery使用规范(一)
    Json序列化循环引用的问题
    后台调用存储过程
    将金额人民币转化为大写 C#
    谷歌分辨率扩展程序的添加
    MVC 删除文件
    MVC C# 调用存储过程
    XML 转换 lits<>
  • 原文地址:https://www.cnblogs.com/ht955/p/13769899.html
Copyright © 2011-2022 走看看