css的分类（位置）：

css层叠样式表

1.内嵌 样式表

2.行内样式表

3. 外连

css选择器分类

基础选择器

标签

id选择器

类选择器

复合选择器

交集选择器（标签指定式）  span.one

后代选择器                .one  .two

并集选择器 （集体声明）    .one,.two

通配符选择器  *   所有标签

body, h1{font-size:12px;}

<body>

<div></div>

<span></span>

<h1></h1>

</body>

伪类选择器

a:link

a:visited

a:hover

a:active

lv h a

背景：

背景颜色

背景图片 background-image:url(xxx.jpg);

背景平铺          -repeat: no-repeat

背景位置：       -position:

background-position: top  left center 方位名词

background-position:3px 10px;  精确像素

background-position:10px center;  这个背景图片 离横坐标是10像素的距离

fixed

边框：

border-color

border-width

border-style  样式  solid  实线

一个属性里面有多个值 ：  复合属性

border:1px solid #f00;

border-top

1.盒子模型（box）

盒子模型是我们css+div 的入门门槛 .

盒子模型的重要参数：

border  盒子边框

内部距离 内边距 内补白   padding

外边距                   margin

方位                    top  left  right  bottom

2.margin 复合属性 （参数个数的写法）

这种写法同样适合于 padding

这样要求：

盒子距离上边距是 100px  下 是 200px  左边是0px  右边是20px

 margin-top:100px;

 margin-bottom:200px;

 margin-left:0;

 margin-right:20px;

简写： margin:100px 20px 200px 0;

margin:100px;  （一个参数）

表示 上下左右都是100像素。

margin: 100px  30px; （两个参数）

表示  上下是100  左右是30

margin: 100px 30px 10px; （三个参数）

表示  上是100  左右是30  下是10

margin: 10px 20px 30px 40px;(四个参数)

表示 上是10  右是20  下是30  左是40  （顺时针）

3.关于padding的问题(盒子的实际大小)

padding会影响盒子大小.

盒子实际大小：  盒子本身大小+border+padding

例如： 一个盒子宽度 100  边框 是 10  内边距是20  问这个盒子实际大小是：

盒子=100+10*2+20*2    160 像素

152

100  +40  +12

100  =  padding +border

88   +     5       +    1  =100

最终的大小240 =  盒子本身宽 +border + padding

240= 220  + 2+    12+6

特别注意：

不是所有的padding都会影响盒子的大小。

如果这个盒子没有高和宽就不会影响盒子大小。

4.几个小点

　　4.1firebug  的使用    ctrl+shfit+c   测试元素   f12 调出

　　4.2稳定性：

　　盒子本身的宽和高是最稳定的 （高度剩余法）

　　其次是padding 值

　　最后margin值。

　　所以，我们本着的原则是：能用padding的地方就不要用margin。

　　其实，padding 也可以看做是盒子本身的宽度和高度。

　　4.3清除浏览器内外边距

　　这个是我们写网站css 的第一句话。（必须写）

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:; padding:; }

　　4.4让盒子居中对齐

　　margin:0 auto;

　　注意： 让盒子内部的文字或者图片居中对齐： text-align:center;

　　但是让盒子居中对齐： margin：0  auto;

　　margin:auto 也行，最常用的还是margin：0  auto;

　　注意：这个盒子应该是块级元素。而且必须有宽。

　　4.5代码的书写顺序

　　　　1. 先集体声明清除浏览器样式

　　　　2. 声明body 字体大小  颜色   字体

　　　　3. 声明a 链接样式。

resize:none  不让火狐拖动文本域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>评论页面</title>

<style type="text/css">

body,div,ul,li,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;}

body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;}

a{color:#000; text-decoration:none;}

a:hover{color:#F00; text-decoration:underline;}

.box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;}

.box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;}

textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;}

p{margin-top:15px; color:red;}

</style>

</head>

<body>

<div class="box">

        <h3>评论     <img src="data:images/110.jpg" /><a href="#">俺要打分</a></h3>

        <textarea>请输入您对的意见或者建议！！</textarea>

        <input type="image" src="data:images/tj.jpg" />

       <p>暂时没有评论</p>

</div>

</body>

</html>

5.<label></label> 标签

　　for   id  来使用

<style type="text/css">

*{margin:0; padding:0;}

.box{width:300px; margin:100px auto;}

.search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;}

label{color:#3c3c3c; font-size:14px;}

</style>

</head>

<body>

<div class="box">

<label for="sear">搜索一下：</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></div>

</body>

</html>

1.  Background:red;  除了颜色之外没有其他样式

Background-color:red;  只针对于颜色

-image    repeat

Background-position : x   y ;

a:link    a:visited   a:hover   a:active

边框   上下左右  top  right  left  bottom

内边距   padding

外边距   margin

盒子大小：

1. 盒子实体大小： 盒子本身宽和高+padding+border

2. 盒子的最终大小： 盒子本身的宽和高+padding+border+margin

Margin：10px  20px  30px  40px

*{margin:0; padding:0;}

设计网页代码写法:

(1) 清除浏览器样式   *{margin:0; padding:0;}

(2) 页面的整体声明：  body { font-size:12px; c} ul ol

(3)  链接    a{color:blue;} a:hover{color:red;}

1.如果让斜体(em i)   变成正常字体：  font-style:normal;

如果让加粗的字体  变成正常字体 ：  font-weight:normal;

em{font-style:normal;}

盒子模型    边框

Textarea  Resize  设置是否可以拖动  火狐默认是可以拖动的    resize:none; 不允许拖动

firefox   火狐浏览器

Firebug   火狐浏览器插件

Fireworks  图像处理软件（ps）

Fw    dw    ps    flash   网页四剑客

Ps  装饰装潢    平面    网页

Fw  创造出来就是为了网页

外边距塌陷的规则

刚开始 人们觉得margin 塌陷是个bug   后来才发现，所有的浏览器都这样。

所以就不算bug

2. 外边距 只会在垂直之间产生塌陷；水平之间不受影响；

3.垂直之间塌陷的原则是以两方最大的外边距为准；50   100

4.只有两个盒子的垂直外边距完全接触才会触发。

一般情况下，垂直两个盒子出现这种情况下，比较少（并列）

出现情况比较多的是，嵌套关系的盒子。急需要我们去解决。

解决方法：

1. 给大盒子指定一个边框。可以解决 ，如果不希望看到边框，可以改成白色。

2. 溢出  overflow:hidden   大盒子加

overflow   溢出

visible| auto| hidden| scroll

Auto   内容如果超出，则显示滚动条  否则  不显示滚动条

Scroll    不管超不超出，则都显示滚动条。

hidden  超出的部分，不显示。

white-space

white-space： nowrap  强制一行内显示直到文本结束或者碰到<br/>

cursor  鼠标

.ani        .cur

cursor:url(mao.ani);  设置鼠标样式

Cursor:pointer; 所有的浏览器都能识别

word-break:break-all;

适合长英文句自动换行。

浮动

3.1.标准流

标准流实际上就是一个网页内标签元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局；

3.2. 浮动  

Float ：left  right

浮动是我们学习的第一种脱离标准流的方式；也就是说它不受文档流的限制，按照另外的一种方式去布局；

记住！学习浮动，浮动有一个主要的作用是可以让多个盒子水平排列，并且他是一种严格的对齐方式！

浮动找浮动， 不浮动找不浮动

一列固定宽度且居中

两列固定宽度且居中

转载请备注。

css.day03的更多相关文章

  1. 2020年12月-第02阶段-前端基础-CSS Day03

    CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3 ...

  2. css.day03.eg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  7. day03 Django目录结构与reques对象方法

    day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...

  8. java-前端之css

    css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...

  9. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

随机推荐

  1. iOS9 以上的真机调试 不用证书

    具体流程如下: 首次使用AppleID  的注意事项:  要在设置中 进行 如下操作  设置--通用--描述文件   ---添加信任 但是有时候  还是 会不能调试,  显示信息  是这样的   : ...

  2. arm-none-eabi-gcc install

    Zephyr除了官方的编译工具,还有第三方工具 arm-none-eabi-gcc . This PPA is an alternative to toolchain released at http ...

  3. PHP与MYSQL配合完成IP的存取

    如何存储IP 程序设计要在功能实现的基础上最大限度的优化性能.而数据库设计是程序设计中不可忽略的重要部分,巧存IP地址可以一定程度提升性能. 利用函数算法处理 MySQL没有直接提供IP类型字段,但有 ...

  4. 转:PHP超时处理全面总结

    原文来自于:http://wulijun.github.io/2012/08/08/php-timeout-summary.html 概述 在PHP开发工作里非常多使用到超时处理的场合,我说几个场景: ...

  5. 转:LESS CSS 框架简介

    原文来自于:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTM ...

  6. JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架

     Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...

  7. animate基础

    用JQUERY做动画是很方便的,已经看过大牛们做出不逊色于FLASH的各种效果. 其中的基本功就有animate这个方法的使用.于是,从零开始,训练基本功: <body> <div ...

  8. commit日志历史不一致的Git仓库合并

    有个项目,用SVN commit的在国内开源中国的码云托管,可以直接Git clone"导出"一个本地的git仓库,我在Github上新建立了一个远程的仓库,准备把在码云上clon ...

  9. 设计模式 Mixin (混入类)

    混入(mix-in)类代表类之间的另一种关系.在C++中,混入类的语法类似于多重继承,但是语义完全不同.混入类回答"这个类还可以做什么"这个问题,答案经常以"-able& ...

  10. Oracle 搜集统计信息的存储过程

    DECLARE CURSOR STALE_TABLE IS SELECT OWNER, SEGMENT_NAME, CASE WHEN SIZE_GB < 0.5 THEN 30 WHEN SI ...