css 边距等常用设置

前端知识

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="sfhdjf.css">

</head>

<body>

<!--左边开始-->

<div class="left">

    <!--头像开始-->

    <div class="c1">

        <img src="ss.png" alt="显示不成功">

    </div>

    <div class="c2">洪哥的博客</div>

    <div class="c3">这条抵扣水电费</div>

    <div class="c4">

        <ul>

            <li><a href="">关于我</a></li>

            <li><a href="">关于你</a></li>

            <li><a href="">关于他</a></li>

        </ul>

    </div>

    <div class="c5">

        <ul>

            <li><a href="">js</a></li>

            <li><a href="">cs</a></li>

            <li><a href="">sss</a></li>

        </ul>

    </div>

</div>

<!--右边开始-->

<div class="right">

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

</div>

</body>

</html>

html代码示例

/*公共样式*/

*{

    font-family: '微软雅黑';

    font-size:14px;

    margin:;

    padding:;

}

a{

    text-decoration:none;

}

/*左边栏*/

.left{

    width:%;

    background-color:rgb(,,);

    height:%;

    position:fixed;

    left:;

    top:;

}

.c1{height:128px;

    width:128px;

    border:1px solid red;

    border-radius:%;

    overflow:hidden;

    margin: auto;

}

.c1>img{

    max-width:%

}

.c2{

    color:white;

    font-size:24px;

    font-weight:bold;

    text-align:center;

    margin-top:10px;

}

.c3{

    color:white;

    text-align:center;

    border:2px solid white;

}

.c4,.c5{

    text-align:center;

    margin-top:10px;

}

.c4 a,.c5 a{

    color:white;

}

.c5 a:before{

    content:'#'

}

/*!*右边栏*!*/

.right{

    width:%;

    background-color:white;

    height:1000px;

    float:right;

}

.c6{

    background-color:grey;

    margin-left:30px;

    margin-right:%;

    margin-top:30px;

}

.c7:after{

    content:'';

    clear:both;

    display:block;

}

.c7{

    border-left:3px solid red;

}

.c8{

    float:left;

    padding:15px;

}

span{

   float:right;

}

.c10{

    margin-top:10px;

}

.c11{

    border-top:2px solid red;

    padding-top:10px;

}

css代码

. 背景属性

        . background-color

        . background-image

    . 边框属性

        . border

        . border-radius  --> 变圆

    . display属性

        . inline

        . block

        . inline-block

        . none (隐藏)

    . CSS盒子模型(从外到内)

        . margin: 边框之外的距离(多用来调整 标签和标签之间的距离)

        . border边框

        . padding:内容区和边框之间的距离(内填充/内边距)

        . condent: 内容

    . 浮动:

        div配合float 来做 页面的布局

        任何元素浮动之后都会变成块元素

        float:

            . left

            . right

            . none

    . 清除浮动(清除的是浮动带来的负面效果-->父标签塌陷(撑不起来))

        . clear

            . left

            . right

            . both

        最常和伪元素结合起来应用:

            .clearfix:after {

                content: "";

                display: block;

                clear: both

            }

    . 定位:

        . static   --> 默认的

        . relative --> 相对定位(相对于原来的位置来说)

        . absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)

        . fixed    --> 固定在某个位置(返回顶部按钮)

    left   right   top   bottom

总结

    . 伪类和伪元素

        . 伪类

            . :link

            . :visited

            . :hover (重要)

            . :active

            . :focus(input标签获取光标焦点)

        . 伪元素

            . :first-letter

            . :before(重要 在内部前面添加)

            . :after(重要 在内部后面添加)

    . CSS属性

        . 字体

            . font-family

            . font-size

            . font-weight

        . 文本属性

            . text-align 对齐(重要)

            . text-decoration 装饰 (去除a标签的下划线(text-decoration: none))

            . text-indent 首行缩进

        . 背景属性

            . background-color  背景颜色

            . background-image  背景图片(九宫格涮葫芦娃)  url() no-repeat % %

        . color

            . red (直接写名字)

            . #FF0000

            . rgb(, , )  --> rgba(,,,0.5)

        . 边框属性 border

            . border-width (边框宽度)

            . border-style (边框样式)

            . border-color (边框颜色)

            简写:

                border: 1px solid red;

        . CSS盒子模型

            . content (内容)

            . padding (内填充) 调整内容和边框之间距离时使用这个属性

            . border  (边框)

            . margin  (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)

            注意: 要习惯看浏览器console窗口那个盒子模型

        . display (标签的展现形式)

            . inline

            . block   菜单里面的a标签可以设置成block

            . inline-block

            . none  (不让标签显示,不占位)

        . float(浮动)

            . 多用于实现布局效果

                . 顶部的导航条

                . 页面左右分栏 (博客页面:左边20%,右边80%)

            . float

                . 任何标签都可以浮动,浮动之后都会变成块级 a标签float之后就可以设置高和宽

            . float取值:

                . left

                . right

                . none

        . clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)

            . 结合伪元素来实现

                .clearfix:after {

                    content: "",

                    display: "block",

                    clear: both;

                }

            . clear取值:

                . left

                . right

                . both

        . overflow

            . 标签的内容放不下(溢出)

            . 取值:

                . hidden  --> 隐藏

                . scroll  --> 出现滚动条

                . auto

                . scroll-x

                . scroll-y

            例子:

                圆形头像的例子

                    . overflow: hidden

                    . border-radius: %  (圆角)

        . 定位 position

            . static(默认)

            . relative(相对定位 --> 相当于原来的位置)

            . absolute(绝对定位 -->相当对于定位过的前辈标签)

            . fixed (固定 --> 返回顶部按钮示例)

            补充:

                脱离文档流的3种方式

                    float

                    absolute

                    fixed

        . opacity (不透明度)

            . 取值0~

            . 和rgba()的区别:

                . opacity改变元素\子元素的透明度效果

                . rgba()只改变背景颜色的透明度效果

        . z-index

            . 数值越大,越靠近你

            . 只能作用于定位过的元素

            . 自定义的模态框示例

总结

css 边距等常用设置的更多相关文章

css样式引入方式，及常用设置标签样式
一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...
CSS边距---盒子模型
CSS盒子模型盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所 ...
css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
(转)css内边距与外边距的区别，精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
CSS布局和居中常用技巧
1.常用居中方法居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中: <div class="parent"> <div class=&qu ...
css的书写规范+常用
格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...
IntelliJ IDEA 常用设置讲解
说明 IntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它. 常用设置 IntelliJ ...
CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
IntelliJ IDEA 常用设置讲解1
IntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它. 常用设置 IntelliJ ID ...

随机推荐

Python读取图片尺寸、图片格式
Python读取图片尺寸.图片格式需要用到PIL模块,使用pip安装Pillow.Pillow是从PIL fork过来的Python 图片库. from PIL import Image im = ...
search() 方法解析
search()方法支持正则表达式的String对象的方法. 好,我们直接来贴代码,看效果,从实践理解透析方法的知识点和实际运用. var str="Visit W3School!" ...
ORACLE数据库常用命令和Sql常用语句
ORACLE 账号相关如何获取表及权限 1.COPY表空间backup scottexp登录管理员账号system2.创建用户 create user han identified(认证) by m ...
Java NIO Files
Java NIO Files Files.exists() Files.createDirectory() Files.copy() Overwriting Existing Files Files. ...
encodeURI & encodeURIComponent
[encodeURI & encodeURIComponent] 区别在于,"&", "+", 和 "=" 不会被enco ...
python 之面向对象
继承粗体文本标签(空格分隔): 继承什么是继承: 继承是指类与类之间的关系,是一种什么"是"什么的关系,继承的功能之一就是用来解决代买重用问题,继承是一种创建新类的方式,在py ...
ES5新增数组方法every()、some()、filter()、map()
JavaScript ES5标准中新增了一些Array方法,如every().some().filter().map().它们的出现使我们能够更加便利地操作数组,但对IE9以下浏览器的兼容性比较差.下 ...
MyEclipse2014安装aptana插件
1. 2. aptana插件下载地址链接: https://pan.baidu.com/s/1sloiAK1 密码: a1nh 3. 4. 确认是否安装成功
char、varchar、nchar、nvarchar的区别（转）
转自:http://tech.diannaodian.com/dw/data/sql/2011/1005/135556.html 对于程序中的string型字段,SQLServer中有char.var ...
DBCP连接数据库了解一下
---恢复内容开始--- package com.kevin.Utils; import javax.sql.DataSource; import org.apache.commons.dbcp.Ba ...

css 边距等常用设置

css 边距等常用设置的更多相关文章

随机推荐

热门专题