5、css补充
css其余问题补充
本篇导航：
一、默认的高度和宽度问题
1、父子都是块级元素
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
img{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<img class="son" src="s1.jpg"></img>
</div>
</body>
</html>
这时，子元素设置为了父元素width的100%，那么子元素的宽度也是500px；
但是如果我们把子元素的width去掉之后，就会发现子元素还是等于父元素的width。也就是说，对于块级元素，子元素的宽度默认为父元素的100%。
当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值。
毫无疑问，如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。
2、父：块级元素 子：内联元素
如果内联元素是不可替换元素（除img，input以外的一般元素），元素是没有办法设置宽度的，也就谈不上100%的问题了。 即内联元素必须依靠其内部的内容才能撑开。
如果内联元素是可替换元素（img，input，本身可以设置长和宽），不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
img{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<img class="son" src="s1.jpg"></img>
</div>
</body>
</html>
由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。 同样， 如果只设置width，那么height也会等比例改变。 如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了。而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。
二、后台管理布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> .pg-header{
height: 48px;
width: 100%;
background-color: #2459a2;
position: fixed;
top:0;
left: 0;
}
.left{
position:absolute;
left:0;
top:48px;
bottom:0;
width:200px;
background-color: #ededed;
} .right{
position:absolute;
right:0;
left:200px;
top:48px;
bottom:0;
overflow:auto; }
.content{
height: 2000px;
width: 100%; }
</style>
</head>
<body> <div class="pg-header"></div>
<div>
<div class="left"> </div>
<div class="right">
<div class="content"></div>
</div>
</div> </body>
</html>
三、css响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*======================================初始化=====================*/
*{
margin: 0;
padding: 0;
} body{
font-size: 12px;
} a{
text-decoration: none;
} /*======================================header区域设置=====================*/
.header{
height: 44px;
width: 100%;
background-color: #2459a2;
position: fixed;
top:0;
left: 0;
} .header_content{
width: 80%;
height: 44px;
background-color: #2459a2;
margin: 0 auto;
line-height: 44px;
position: relative; } /*======header区part1:logo ===========*/ .logo{ float: left;
width: 121px;
height: 23px;
margin-top: 9px; } /*======header区part2:action-menu =====*/ .action-menu{
float: left;
margin-left: 30px;
} .action-menu a.tb{
color: #c0cddf;
padding: 0 10px;
text-align: center;
margin-left: -3px;
display: inline-block; } .action-menu a.tb:hover {
color: #fff;
background-color: lightslategrey; } .action-menu a.active, .action-menu a.active:hover {
color: #fff;
background-color:#204982;; } /*======header区part3:key-search =====*/ .key-search{
margin-top: 5px;
float: right;
} .key-search a.search-icon-box, .search-txt {
float: left;
} .search-txt { color: #333;
line-height: 25px;
padding: 2px 2px 2px 5px;
height: 25px;
width: 91px; } .key-search a.search-icon-box {
border: 1px solid #e0e0e0;
background-color: #f4f4f4;
width: 30px;
height: 31px;
border-left: 0;
} .key-search a.search-icon-box span.search-icon{
background: url("images/icon.png") no-repeat 0 -197px;
float: left;
height: 12px;
width: 11px;
margin-left: 10px;
margin-top: 9px;
} /*======header区part4:action-nav =====*/ .action-nav {
float: right;
margin-right: 10px;
} .action-nav a {
color: white;
padding: 14px 18px; } .action-nav a:hover{
background-color: lightslategrey;
color: white;
}
/*======================================content区域设置=====================*/ .content-box {
background-color: #ededed;
padding-top: 44px;
height: 100%;
} .content {
width: 960px;
margin: 0 auto;
height: auto!important;
overflow: hidden;
min-height: 713px;
padding: 6px 28px;
background-color: #fff;
/*overflow: hidden;取消后看看效果*/
} /*===============================响应式布局=====================*/ @media(max-width:1050px) { .action-menu a.item{ display: none;
background-color: gold;
border: dashed 1px rebeccapurple; color: black; } .action-menu a.active{ padding: 0 25px; } .action-nav{ float: left; margin-left: 80px; } .key-search{
float: right;
margin-right: 100px;
} .action-menu:hover a.item{
display: block; } } @media(max-width:810px) { .key-search{
display: none;
} .action-nav{
display: none;
}
} </style>
</head>
<body> <!--header结构-->
<div class="header"> <div class="header_content"> <div class="logo">
<a href="/"><img src="data:images/logo.png" alt=""></a>
</div> <div class="action-menu"> <a href="#" class="tb active">全部</a>
<a href="#" class="tb item">42区</a>
<a href="#" class="tb item">段子</a>
<a href="#" class="tb item">图片</a>
<a href="#" class="tb item">挨踢1024</a>
<a href="#" class="tb item">你问我答</a>
</div> <div class="key-search"> <form action="/" method="post">
<input type="text" class="search-txt"> <a href="#" class="search-icon-box" >
<span class="search-icon"></span>
</a>
</form> </div> <div class="action-nav"> <a href="#" class="register-btn">注册</a>
<a href="#" class="login-btn">登录</a>
</div> </div>
</div> <!--content结构--> <div class="content-box"> <div class="content"> </div> </div> </body>
</html>
5、css补充的更多相关文章
- CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
- CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- HTML+CSS补充
1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...
- 53、css补充
css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...
- 第五篇、css补充二
一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...
- 前端之CSS：CSS补充
css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...
- Python之路【第十一篇续】前端之CSS补充
CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...
- CSS 补充
属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...
随机推荐
- Spring MVC基础知识整理➣拦截器和自定义注解
概述 Spring MVC中通过注解来对方法或者类进行动态的说明或者标注,类似于配置标识文件的属性信息.当标注的类或者方式被使用时候,通过提取注解信息来达到对类的动态处理.在 MVC中,我们常用的注解 ...
- JMeter中BeanShell Sampler调试分享
BeanShell脚本 String s = "s"; String y = "y"; boolean result = s.equals(y); vars.p ...
- Flink--sink到kafka
package com.flink.DataStream import java.util.Properties import org.apache.flink.api.common.serializ ...
- seafile数据的备份与恢复
seafile数据备份包括MySQL数据备份与seafile,seahub数据备份两个部分.所以在备份的时候需要注意这一点. 我的存储底层用glusterfs数据共享,为了防止一台服务器宕机以后另一台 ...
- BZOJ4802 欧拉函数 数论
原文链接http://www.cnblogs.com/zhouzhendong/p/8117744.html 题目传送门 - BZOJ4802 题意概括 Description 已知N,求phi(N) ...
- 025 SSM简单搭建
参考了同事的文档,自己也写一篇文档. 同时,补充了一下,程序是如何运行的. 一:SSM框架 1.说明 SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC ...
- SEED-DVS6467_SDK的交叉编译环境搭建问题
今天在ubuntu16.04上安装arm的交叉编译器arm_v5t_le-gcc,环境变量配置好以后,运行arm_v5t_le-gcc命令,总提示No such file or directory.然 ...
- html-伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LIS+二分法
http://poj.org/problem?id=3903 数列里是存从小到大排的数,二分也是为了这个服务的,不断更新.而len才是所求长度 #include <iostream> #i ...
- 前端之html、css
一.什么是前端 前端即网站前台部分,运行在PC端.移动端等浏览器上展现给用户浏览的网页.前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基 ...