web前端_css02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*宽度允许百分比,高度不允许*/
.c1 {
background-color: bisque;
}
.c2{
width: 50%;
height: 100px;
}
/*inline由块级标签变成行内标签*/
.dis-inline{
display: inline;
}
/*block由行内标签变成块级标签*/
.dis-block{
display: block;
}
/*即使行内也是块级标签*/
.dis-inline-block{
display: inline-block;
}
/*内外边距*/
.c3{
/*1像素边框是绿色的*/
border: 1px solid green;
width: 100%;
height: 100px;
}
.c4{
background-color: red;
width: 100%;
height: 48px;
/*外边距 可调整*/
margin-top: 0px;
/*内边距 可调整*/
padding-top: 0px;
}
</style>
</head>
<body>
<div class="c1 c2 dis-inline">块级变行内</div>
<span class="c1 c2 dis-block">行内变块级</span>
<!-- 行内标签必须自己有内容否则无法应用宽,高,内外边距(无法展示)-->
<span style="height: 100px;width: 100px;background-color: yellow">内容</span>
<br>
<span class="dis-inline-block c1 c2">即时行内也是块级</span>
<!-- 内外边距-->
<div class="c3">
<div class="c4"></div>
</div>
</body>
</html>
web前端_css02的更多相关文章
- Web前端需要熟悉大学里【高大上】的计算机专业课吗?
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
随机推荐
- 【Linux开发】linux设备驱动归纳总结(五):1.在内核空间分配内存
linux设备驱动归纳总结(五):1.在内核空间分配内存 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- CentOS7安装Git-2.22.1
1.Git: 分布式版本控制系统(最初用于Linux),每个人的电脑上都是一个完整的版本库,具有强大的分支管理. 自己可以在脱机环境查看开发的版本历史 多人开发时如果充当中央仓库的Git仓库挂了,任何 ...
- Vim命令使用
终端输入vim命令(不区分大小写)进入Vim,起始默认进去是normal模式(即普通模式),使用:q可以退出Vim,使用i(insert)进入编辑模式,开始输入文字,使用Esc键又可以回到normal ...
- FFmpeg4.0笔记:VS2019编译FFmpeg4.0源码
0.下载TDM.msys和yasm 1.安装TDM-GCC-64 2.安装msys到TDM-GCC的安装目录中 3.将call "C:\Program Files (x86)\Microso ...
- python中super函数的参考
https://rhettinger.wordpress.com/2011/05/26/super-considered-super/ http://wiki.jikexueyuan.com/proj ...
- 关于Faster-RCNN训练细节
Faster RCNN训练: 四部训练法: Faster R-CNN,可以大致分为两个部分,一个是RPN网络,另一个是Fast R-CNN网络,前者是一种候选框(proposal)的推荐算法,而后者则 ...
- Redis安全策略
1. 开启redis密码认证,并设置高复杂度密码 描述 redis在redis.conf配置文件中,设置配置项requirepass, 开户密码认证. redis因查询效率高,auth这种命令每秒能处 ...
- spring boot JPA 数据库连接池释放
当JPA获取数据库数据连接时,如果连接数超过最大连接数的配置,系统就会报错: Unable to acquire JDBC Connection 和: Caused by: java.sql.SQLT ...
- 一般处理程序,ajax
一般处理程序调用session: 在.aspx.cs页中读写Session都是Session["***"]就可以获取或者写入.但是在一般处理程序也就是ashx页面中,再这样写的话, ...
- 一、redis学习(基础)
redis 持久化 rdb aof