zoukankan      html  css  js  c++  java
  • css样式重置以及定位

    1.*{margin:0;padding:0;}
    缺点:稍微影响性能
    优点:不用考虑哪些标签有默认样式
    ul{list-style:none}
    a{text-decoration:none}
    取消连接下划线
    img{display:block}
    问题现象:图片内容跟容器底部出现缝隙
    内联元素的对齐方式是按照文本基线对齐的,而不是文字底线对齐的
    2.写具体页面的时候或一个布局效果的时候
    1.写结构
    2.css重置样式
    3.写具体样式
    3.浮动
    概念:脱离文档流,沿着父容器靠左或靠右进行排列
    float:felt:左浮动
    float:right:右浮动
    float注意点
    1.只会影响后面元素
    2.内容默认提升半层
    3.默认宽度根据内容决定
    4.默认排列。主要给块元素添加,但是也可以给内元素添加
    如何清清除浮动:
    1.上下排列:clear 表示清除浮动的,left,right,both
    2.嵌套排列:
    父元素浮动:不推荐,父元素浮动会影响到后面的元素
    overflow:hidden(BFC规范),如果子元素想溢出,那么会受到影响
    display:line-block(BFC规范),不推荐,父容器会影响到后面的元素。
    设置空标签:不推荐,会多添加一个标签。
    after伪类:推荐,是空标签的加强版
    4.css定位
    position
    static
    relative
    absolute
    fixed
    sticky
    relative相对定位:
    如果没有定位偏移量,对元素没有任何影响
    不使用元素脱离文档
    不影响其他元素
    left,top,right,bottom是相对自身当前元素进行偏移的
    absolute绝对定位:
    使文档脱离文档流
    可以使内联元素具备宽高,宽高由内容决定
    如果有定位祖先元素相对定位发生偏移,没有定位元素相对于整个文档发生便宜
    fixed固定定位:
    是元素脱离文档流
    内联元素支持宽高,使元素宽高根据内容进行决定
    相对于整个浏览器窗口进行偏移,不授浏览器滚动条影响
    sticky粘性定位
    在指定位置,进行粘性操作
    z-index定位层级
    默认层级为零级
    嵌套时候的层级问题
    5.省略号
    步骤:
    width必须有一个固定的宽
    white-space:nowrap不让内容折行
    overflow:hidden:隐藏溢出内容
    text-overflow:ellipsis添加省略号
    6.css圆角
    border-radius:px
    可以分别设置各个角的圆角

  • 相关阅读:
    JavaScript的函数(二)
    Python:os.walk()和os.path.walk()用法
    Python:代码单元、代码点介绍
    Python:如何去掉字符串中不需要的字符
    Python:更改字典的key
    Python:如何对字符串进行左、右、居中对齐
    Python:format()方法
    日常开发之缓存技术
    Web系统大规模并发——秒杀与抢购 秒杀系统优化与预防措施
    PHP之位运算符
  • 原文地址:https://www.cnblogs.com/cengzhuquan/p/13899212.html
Copyright © 2011-2022 走看看