css.day04

1. box   盒子模型

<p>   <span>   <hr/>   <div>

css+   div  p  span

css+  xhtml

border   padding  margin

border:1px solid  #f00;

padding:20px

padding:30px 5px;

margin: 0 auto;

margin:10px 30px  40px;  上  10  左右时 30  下是40

margin:10px 20px 30px 40px;

padding  无论如何肯定影响实体大小  错误

做网页标准否？

稳定性：

宽和高    padding   margin

浅蓝       紫色     黄色

css  清除

input  hr  默认有边框

body,div,ul,li,input,hr,textarea{margin:0;padding:0;border:0;}

一般三大步骤：

1.清除浏览器

2. body页面字体 字号  颜色进行规定

3. 链接进行设置

<label for=’search’>搜索一下</label>  <input type=”text” name=”search” id=’search’>

外边距合并的问题

以前，发现这个问题，认为是浏览器的问题（bug），但是，又发现，所有浏览器都这样，我们就认为是外边距的一个特性。我们称之为外边距合并（外边距塌陷）。

这个外边距合并的问题，水平外边距是不会出现的。只有在垂直外边距才出现。

1. 两个盒子是并列关系的

那么外边距会以这两个盒子最大的那个外边距为准。

2. 两个盒子是父子级关系（重点）

原因是小盒子和大盒子的外边距合并到了一起，但是，此时，我们不需要它们合并。

解决方法就是： 把小盒子和大盒子的外边距隔开就可以了。

1.一般情况下，给大盒子加边框（border）

代码如下：

<!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">
  .father{width:300px; height:150px; background-color:#F00;border:1px solid #fff;}
  .son{width:100px; height:50px; background-color:#0F0; margin-top:50px; }
</style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

2.给大盒子加 代码： overflow:hidden;  （溢出的部分隐藏）

<!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">
  .father{width:300px; height:150px; background-color:#F00; overflow:hidden;}
  .son{width:100px; height:50px; background-color:#0F0; margin-top:50px; }
</style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

我们的css本身就很复杂，有些问题是莫名奇妙，所以，很多的方法，没有一中是都能用得到，也没有一种，永远都用不到的，我们只是在合适的地方用到合适的方法。

我们要做到，出了问题，为什么会出问题。如何去解决问题。

浮动 （float）

浮动是页面布局中，非常非常重要的地方，使我们布局的核心。

页面布局 之 标准流

什么是标准流：就是页面元素正常的显示方式，例如，块级元素，就是自己独占一行，例如 行内元素，就是一行可以有好多个。

这种方式，在网页布局中，最稳定。（首推）

页面布局 之 浮动流

浮动乃漂浮也。及其简单   float:left      float:right

浮动流是脱离标准流的第一种方式。

我们学习浮动时，一定要明白浮动的概念。

此时： 要爬黑板。

说： 盒子有上下顺序。

说到底： 浮动流是漂浮在标准流的上方的。

刚才测验： 给第一个盒子浮动，那么 这两个盒子就是叠加。

<!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">
.top,.bottom{width:300px; height:150px; background-color:#F00;}
.top{float:left;}
.bottom{background-color:#0F0;}
</style>
</head>
<body>
<div class="top">
</div>
<div class="bottom"></div>
</body>
</html>

如果给两个盒子都加浮动：

<!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">
.top,.bottom{width:300px; height:150px; background-color:#F00;}
.top{float:left;}
.bottom{background-color:#0F0; float:left;}
</style>
</head>
<body>
<div class="top">
</div>
<div class="bottom"></div>
</body>
</html>

因为float  只有 左右两个属性  所有，所有的浮动都是左右分的。

注意： 大家用浮动布局是，切忌一句话：

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

浮动：可以把块级元素转换为行内块（更加精确）

导航栏的效果

大盒子是 500*300

li小盒子  80*40

ctrl+shift+j  折叠代码

代码如下：

<!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">
*{margin:0; padding:0;}
body{font-size:12px; color:#3c3c3c; font-family:"微软雅黑"}
a{color:#3c3c3c; text-decoration:none;}
.box{width:500px; height:300px; border:1px solid #093; margin:50px auto;}
.box ul{list-style:none; margin:30px 10px;}
.box ul li{float:left; width:80px; height:40px; text-align:center; line-height:40px;}
</style>
</head>
<body>
<div class="box">
    <ul>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
                <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
    </ul>
</div>
</body>
</html>

text-align  让盒子里面的文本水平对齐

盒子水平居中 margin:0 auto;

auto   自动   充满

margin-left:auto  让左侧自动充满 （好用）

网页布局版式

在布局一个页面前，首先我们应该要看透它的版式，这样可以帮助我们更好的去布局页面。

一列固定宽度且居中布局

<!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,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.top{width:1180px; height:80px; background-color:#F00; margin:0 auto;}
.nav{width:1180px; height:35px; background-color:#0F0; margin:0 auto;}
.banner{width:100%; height:300px; background-color:#00F;}
.main{width:1180px; height:500px; background-color:#FF0; margin:0 auto;}
.footer{width:1180px; height:120px; background-color:#0FF; margin:0 auto;}
</style>
</head>
<body>
<div class="top"></div>
<div class="nav"></div>
<div class="banner"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>

两列固定宽度 左窄右宽型

<!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,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
#top,#nav,#banner,#main,#footer{width:1000px;  margin:1px auto;}
#top{height:80px; background-color:#F00;}
#nav{height:35px; background-color:#0f0;}
#banner{height:150px; background-color:#00F;}
.left{width:300px; height:500px; background-color:#099; float:left; }
.right{width:699px; height:500px; background-color:#396; float:right;}
</style>
</head>
<body>
<div id="top"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

左中右型

html 注释：  <!--    内容  -->

转载请备注。

时间： 2024-10-06 00:41:02

css.day04的相关文章

css.day04.eg

<!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-

轻装上阵，安卓工程师之路---day04(JavaScript &amp; XML &amp; DTD)

00 Node接口的API(续) createElement()    按照给定的标签名创建一个新的元素节点.方法只有一个参数:将被创建的元素的名字,参数是一个字符串.方法的返回值:是一个指向新建节点的引用指针.返回值是一个元素节点,所以它的 nodeType 属性值等于 1.新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于 JavaScript 上下文的对象. innerHTML   浏览器几乎都支持该属性,但不是 DOM 标准的组成部分.innerHT

黑马day04 画一个汉字的随机验证码的图片

下面的程序详细介绍了如何画一个随机验证码发送到客户端即浏览器进行显示: 1.画随机验证码的代码: package cn.itheima.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; import j

黑马day04 表单请求参数&amp;中文乱码分析

实验: 1.获取post以及get请求方式的参数 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>param.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

CSS 之怀疑自己的审美 2 （Day50）

阅读目录 伪类 选择器的优先级 css 属性操作 一.伪类 anchor伪类:专用于控制链接的显示效果 ''' a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover(鼠标放在链接上的状态),用于产生视觉效果. a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接. a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态. 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

CSS颜色代码大全

CSS颜色代码大全 颜色代码表(一): EEEEEE FFCCFF FF66FF FF00FF DDDDDD FFCCCC FF66CC FF00CC CCCCCC FFCC99 FF6699 FF0099 BBBBBB FFCC66 FF6666 FF0066 AAAAAA FFCC33 FF6633 FF0033 999999 FFCC00 FF6600 FF0000 888888 CCCCFF CC66FF CC00FF 777777 CCCCCC CC66CC CC00CC 666666

如何使用Flexbox和CSS Grid，实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来. 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了. 同时,CSS Grid 布局也为网页设计行业带来了很大的便利.虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持. 虽然 Flexbox 和 CSS Grid 可