zoukankan      html  css  js  c++  java
  • 2018-06-08CSS常用样式+浮动+定位+盒子模型

    CSS布局样式:

    常用样式:

    ①    字体

    ②    颜色

    ③    背景

    布局:

    ①    浮动

    ②    定位

    ③    标签特性

    标签盒子模型:

    ①    内边距

    ②    边框

    ③    外边距

    动画:

    ①    旋转

    ②    渐变

    Link的正确用法:

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

    常用样式:

    ①    字体:

    大小,颜色,粗细,字体!

    子标签会继承父标签的样式(不是所有的样式都会被继承)!

    对于文本:

    ①    Text-align 水平居中

    ②    Line-height 垂直居中

    ---text-decoration文本修饰!

    Text-indent:缩进(这个缩进会传递给子标签,对于行标签Span则不起作用,因为行标签大小根据内容来变)!

    字体是font开头:

    Font-family:字体样式,推荐使用微软雅黑!

    Font-style:

    Font-size:字体大小(一般选用12号字体,稍微大点14号,不要超过16号)!

    1em=16px(也是个单位)!

    font-weight:定义字体的粗细程度!

    Normal:正常!

    Bold:加粗!

    也可以自定义调整数值(如:150,256等等)!

    列表:

    List-style-type:列表项的样式!

    这个就是列表项!

    List-style-image:添加列表项图片!

    List-style-position:

    Inside:内部!

    Outside:外部!

    Inherit:继承父Div的设计格式!

    Background-image:背景图片!

    路径问题:

    ①    JS和Html引入文件从Html文件开始找!

    ②    CSS引入文件从CSS文件开始找!!!

    Background-repeat:平铺!

    Repeat-X:X轴平铺!

    Repeat-Y:Y轴平铺!

    No-repeat:不平铺!

    Background-position:背景图片位置!

    相当于:页面位置已定,手动调整背后图片的位置!

    简写形式:Background:背景颜色 背景图片 平不平铺 图片位置;

    示例:

    background-repeat:no-repeat;

    background-position:0% 0%;

    表格:

    Cellspacing:假设值为0,则是相邻单元格边框厚度的和(2px)!

    Collapse:同样值为0,则是一条边框(1px)!

    CSS中的对齐:

    文本对齐:text-align(水平)line-height(垂直)

    块标签对齐:margin-auto

    使用padding也可强制居中!

    Line-height:行高!想要垂直居中先要设置父标签的height,然后line-height=height!!!

    如果文字跑了,看一下是不是因为设置了宽高,文字换行了?

    Vertical-align是表格(示例是在td里)里面垂直居中的!

    布局:

    ①    Float:top/bottom/left/right

    ②    Position:top/bottom/left/right

    Float浮动只要记住一点:要给浮动元素加一个父标签,并且设置好宽高!

    Div里面也可以加ol/ul/li

    Cursor:指的是鼠标放上去显示的效果(小手,十字星,箭头)!

    http://www.runoob.com/cssref/pr-class-cursor.html  --用法详解!

    需要注意的是:cursor: url(../Pic/CeShi.ico) default;

    必须是ico文件,且后面要跟一个default!!!

    Position定位:

    ①    Fixed:top/bottom/left/right(单位:px)

    ②    Absolute:top/bottom/left/right(单位:px)

    ③    Relative:top/bottom/left/right(单位:px)

    Fixed:相对于窗口定位!

    Top:100px;

    Right:100px;

    加上了position:fixed就不管是不是在div里面了,不在乎是否嵌套,以前所占的位置就不在了!

    Absolute:相对于页面定位!

    Top:100px;

    Right:100px;

    相对于页面定位,在乎嵌套!

    两种情况:

    ①    相对于标签来定位(body)

    ②    相对于最近的有position属性的父标签定位,最终标签还是body,没有本身的位置了!

    Relative:相对自身来定位,位置还有!常用于微调(父标签)!

    加在父标签,用于规定子标签的absolute!

    Ps:用Fn+F12可以把图片摘下来,尝试一下!

    标签特性(display):

    ①    Block

    ②    Inline

    ③    Inline-block

    ④    None(什么都没了,位置也没了,相当于删代码)

    相似的有一个:visibility:hidden—位置还在!

    盒子模型:

    ①    Padding:top/bottom/left/right

    ②    Border:top/bottom/left/right

    ③    Margin:top/bottom/left/right

    Border的定义方式:

    ①    Border-width

    ②    Border-style

    ③    Border-color

    简写:

    Border:20px solid red;

    Border-style:dotted/solid/dashed/double

    把边框弄成圆角矩形:

    边框弄成圆形:

    Border-radius:50% 50%;--弄成Border圆形!

    Box-sizing:border-box;

    不管padding,border,margin设置成多少,永远是先前这个Div设置好的width和height!!!

  • 相关阅读:
    Linux 安装JDK Tomcat MySQL(使用Mac远程访问)
    Linux 基础
    IntelliJ IDEA 新建项目
    Android Studio|IntelliJ IDEA 常用快捷键(Mac|Window)
    C 进制 类型说明符 位运算 char类型
    C 函数
    C 流程控制
    113路径总和II
    111.二叉树的最小深度
    110.平衡二叉树
  • 原文地址:https://www.cnblogs.com/postgredingdangniu/p/9156531.html
Copyright © 2011-2022 走看看