狂神Java学习笔记————CSS3(二)————列表、背景、盒子模型、浮动、定位和z-index

  • 列表样式
  • 可以更改列表中点的样式或者去掉点
  • 复习之前内容

#nav{
            width: 300px;
        }
        .title{
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
        }
        ul li{
            height: 30px;
            /*列表的点 none:去除 circle:空心圆 decimal:数字123. square正方形*/
            list-style: none;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }
  • 背景
  • 背景颜色、图片
  • 渐变背景
    div{
         width: 1000px;
         height: 700px;
         border: 1px solid red;
         /*设置背景:默认为平铺*/
         background: image("xxx/xxx.jpg");
         /*横向平铺和纵向平铺不平铺*/
         background-repeat: repeat-x;
         background-repeat: repeat-y;
         background-repeat: no-repeat;
     }
  • Grabient是一个在GitHub上开源的项目,可以获取各种渐变背景的CSS代码。

盒子模型


元素大小=margi+border+padding+内容


狂神Java学习笔记————CSS3(二)————列表、背景、盒子模型、浮动、定位和z-index_第1张图片

  • margin:外边距
  • padding:内边距
  • border:边框

  1. border
  • 在最上方选择body标签可以进行边距、字体等的初始化
/*设置默认边距为0 初始化*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        from{
            background: blue;
        }
        #box{
            /*border:粗细,样式,颜色*/
            width: 300px;
            border: 1px solid red;
            /*外边距*/
            padding: 0;
        }
        /*结构伪类选择器搭配子类选择器*/
        /*border: solid实线,dashed虚线*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed black;
        }
        div:nth-of-type(3) input{
            border: 3px dashed black;
        }
  1. margin&padding
  • 可以用来居中

        #box{
            /*可以是1、2、4个参数,1个参数代表上下左右边距一样
            2个参数则分别为上下、左右边距,4个分别为上、下、左、右
            auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/
            margin: 0 auto;
        }
  1. 圆角边框
  • 实现按钮等元素的圆角
  • 绘制圆形扇形
	div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        /*边框圆角大小:一个参数则四个角相等
        两个参数则左上右下一样,剩下两个一样
        四个参数则从左上开始顺时针*/
        border-radius: 50px 20px 10px 5px;
        /*可以用来画圆,当圆角大小大于(高宽的一半加上边框粗细)就是圆*/
        border-radius: 60px;
        /*扇形需要三个角为0,另一个圆角大小为(两倍边框粗细加上div的边长)*/
    }
  1. 盒子阴影
     div{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         box-shadow: 10px 10px 100px yellow;
     }

浮动

  • 块级元素:独占一行 h1~h6 p div 列表…
  • 行内元素:不独占行 span a img strong…
  • 行内元素可以被包含在块级元素中,反之则不可以。
  1. display和float
        div{
            width: 100px;
            height: 100px;
            border: 1px red;
            /*display: xxx; inline:变为行内元素 block:变为块元素
             inline-block 块元素但是可以内联,在一行*/
            display: inline;
            /*浮动:float 左右浮动*/
            float: right;
            /*clear:不允许有浮动元素 both:两侧 right、lefe:左、右
            none 默认 允许*/
            clear: right;
         }
  1. 父级边框塌陷问题
    • 增加父级元素的高度:固定了父元素高度,就会被限制
    • 在父级元素内最底部增加一个空的div块,清除两侧浮动:简单,但代码中应该尽量避免空div
    • 在父类添加一个伪类:稍微复杂,没有副作用,推荐使用
        #father{
            border: 1px #000 solid;
            height: 800;
        }
        .clear{
            padding: 0;
            margin: 0;
            clear: both;
        }
        #father:after{
            content: '';
            display: block;
            clear: both;
        }
  1. overflow
  • 如果块内内容大小超过了块所规定的大小,可以使用overflow来控制隐藏超出部分或者添加块内滚动条。
  • 其中overflow:hidden;放在父元素中,可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。
        #content{
            width: 200px;
            height: 100px;
            /*overflow: ; hidden:超出部分隐藏 scroll:滚动条*/
            overflow: hidden;
        }

定位

  1. 相对定位
  • 相对定位:position: relative;
  • 相对于自己原来的位置进行指定的偏移,但是,在标准文档流中,仍然处在原来的位置不变(比如说最后一个div进行向下的偏移,并不会使得父级元素的大小向下扩展)
        div{
            /*相对于自己原来的位置移动*/
            position: relative;
            /*上下左右移动*/
            top: -20px;
        }
  1. 绝对定位
  • 定位:基于xxx定位,上下左右
  • 若没有父级元素定位,基于浏览器定位
  • 如果父级元素有绝对或者相对定位,则基于父元素定位
  • 在标准文档流中,原来的位置会被改变
    div{
        position: absolute;
        right: 100px;
    }
  1. 固定定位
    fixed:相对于窗口定位
        div{
            /*固定定位fixed*/
            position: fixed;
            bottom: 300px;
            left: 50px;
        }
  1. z-index
  • 图层堆叠
        div{
            /*设置图层,默认是0,在最底层*/
            z-index: 10;
            /*设置透明度 此下两句等价*/
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

你可能感兴趣的:(追随狂神学Java,css,定位)