css的再深入7(更新中···)

1.transparent  透明的

2.placeholder  提示语

写页面

  1. 搞清结构层次,
  2. 保证模块化,让他们之间不能受到影响

(1) 元素性质

(2) 标准流

浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响,absolutefixed带来的脱离文档流撑不起父级的高度,使用子元素设置高强制撑起父级。

 

1.css可以继承的属性有哪些?

 

Font 系列 text系列 color line-height

 

2.border-radius的值的问题

 

   

 

 

四个值的顺序是 左上 右上 右下 左下。

 

3.white-space 规定段落中的文本换不换行 往往值是nowrap 不换行

4.Word-wrap 属性允许长的内容可以自动换行  属性值是 break-word 允许 默认是不允许

 

5.写三角形

  

宽高必须是0  效果如下:

 

6.margin对布局的影响  双飞翼布局 圣杯布局 ()

 

  margin是 外边距,属性值是数字 数字又分正负。

正数:margin20px

负数:在static元素中(标准流下)margin-left为负数当前元素向左走 margin-top为负当前元素向上走

margin-bottom为负数后当前元素不动后面的元素向上走,margin-right为负数当前元素不动后面的元素向左走

 

 

注意的,margin为负会增大当前元素的宽(前提是当前元素没有设置width

 

 

场景

 

ul一个margin-right 就无形之中给ul加了20px宽度。

float

margin为负 也是我们常用的双飞翼,圣杯布局

中间自适应 两端固定

给元素margin-left为负当前元素向左走,margin-right为负后一个元素向左走会覆盖当前元素。

absolute

margin为负

让元素居中,前提是知道元素的宽高。

div{

Positionabsolute

Left50%

Top50%

Margin-left:-width/2;

Margin-top:-height/2

}

Margin为负无论在什么条件下都是释放自己的空间,如果自己的margin不够,就把自己的宽高贡献出去。

如:

1.正常状态

 

 

 

2.设margi值时   

  

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

窥探JBoss Fuse 6.1的新功能

我对即将发布的Fuse 6.1版本感到非常兴奋,因为有很多很棒的新功能是我真正想要的,而且已经有一段时间了。 HAWT工具。 因此,这是一个快速的先睹为快,主要关注于新版本的Fuse Management Console(现已由hawtio开源项目…

[C语言] 选择排序之直接选择排序的特性及实现

[C语言] 选择排序之直接选择排序的特性及实现 1、算法特性 直接选择是一种简单、不稳定的选择排序方法,属于最为基础的排序方法之一。 其时间复杂度最好情况为O(n)、最差为O(n)、平均为O(n)&…

电脑测速软件_联通你我【宽带提速】让网速飞!超实用的宽带测速提速攻略来啦!...

宅在家里,在家娱乐、在家办公、在家上课,都需要畅快的宽带网络,所以很多小伙伴都办理了联通宽带怎样才是正确的宽带测速姿势?小沃给大家介绍两种简便的测速方法,同时说说怎样才能完全释放宽带网速、让咱享受到真正的提…

MyEclipse - 查询使用的JDK版本

查询 MyEclipse 使用的 JDK 版本 MyEclipse 菜单->Windows->Proferences->java->Installs Jres重新设置JDK路径,改为开发程序时的JDK版本(如上图)(我做到这一步就可以了!我的eclipse是7.0,jdk…

解析什么是绝对定位,相对定位与浮动

在理解定位之前,先说一个概念,文档普通流,就是元素标签正常在HTML里的顺序,块级元素从上至下排列,行内元素从左到右排列。 绝对定位 绝对定位:absolute,元素相对于离它最近的已定位祖先元素进…

具有多个查询参数的Camel CXF服务

出色的Apache Camel团队忙于解决查询中多个参数的处理问题,这是一种解决方法。 希望该帖子将在下一版本的Camel中变得过时。 (当前,我使用2.7.5) 问题 大于1的查询参数作为null值传递给Camel-CXF服务。 假设网址中有四个查询参数…

《JavaScript高级程序设计》读书笔记(三)基本概念第四小节 操作符

内容---语法 上一小节---数据类型 本小节 操作符---流程控制语句---理解函数 操作符--操作数据值的操作符--算术(如加减)、位操作符、关系、相等--ECMAScript操作符可以适用于很多类型的值--在用于对象时,会先调用对象的valueOf()和&#xff…

el-table数据不显示_数据透视表,一篇就够了

| 函数部分告一段落,这一篇文章助你学懂数据透视表目录:一、创建数据透视表二、数据透视表字段列表值的显示方式三、分析1、切片器2、计算字段3、计算项4、组合四、设计1、分类汇总2、报表布局首先,我们要知道应用数据透视表的前提&#xff1…

app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App

在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低。webapp 要求很低,可以说只要会开发web 站就能开发 webapp,这里不讨论怎么选择&#xff…

解决安卓字体偏移:页面整体缩放

在h5中实现一些小标签、按钮的时候,很容易发现部分安卓机型上的字体显示有问题,总会向上偏移2px左右。这是设置padding或line-height无法修复的,与rem也无关,即使在字体大于12px时依然存在。下图来自于网友的分享,从左…

bmp调色板颜色信息重复_如何更改 Linux 终端颜色主题 | Linux 中国

你可以用丰富的选项来定义你的终端主题。-- Seth Kenlon如果你大部分时间都盯着终端,那么你很自然地希望它看起来能赏心悦目。美与不美,全在观者,自 CRT 串口控制台以来,终端已经经历了很多变迁。因此,你的软件终端窗口…

mac 配置java adb环境_MAC 配置android adb命令的环境变量

1,打开终端,敲入命令:sudo vi .bash_profile (如果有密码就为本机登录密码)(如果没有这个文件就会创建一个新的)默认终端目录如图,生成的文件为隐藏文件:(显示隐藏文件命令:defaults write com.apple.finder AppleSho…

mac懒人版_这些实用的Mac软件你迟早会用到,建议收藏!

日常使用mac,遇到不同的问题可以通过不同的应用进行来进行处理,所以称手的工具是必不可少的。然而这些问题也会引导我们去发现更多实用优秀的软件,今天macdown就把自己在使用Mac过程中遇到的一些实用的Mac软件推荐给大家,相信你迟…

Metro风格的Java组合框(JMetro)–重新介绍

我上一篇有关JMetro的文章–我的都市风格的Java外观(或外观)是关于日历选择器控件的外观 。 我本打算使用Tom Eugelink不错的日历选择器,但是当时我了解到它是由Oracle创建并随Java 8一起交付的,因此出于时间的考虑(几…

左斜杠和右斜杠有什么区别_「斜杠云」SEO推广和SEO优化有什么区别?

1,首先,从概念上来说,网络推广就是企业从开始申请域名、租用空间、网站备-案、建立网站、直到网站正式上线开始就算是介入了网络推广活动,而通常我们所指的网络推广是指通过互联网的种种手段,进行的宣传推广等活动&…

python算两个时间之间的天数,将天数转成int型

import time import datetime#计算两个日期相差天数,自定义函数名,和两个日期的变量名。 def Caltime(date1,date2):#%Y-%m-%d为日期格式,其中的-可以用其他代替或者不写,但是要统一,同理后面的时分秒也一样&#xff1…

并发编程-concurrent指南-阻塞队列BlockingQueue

阻塞队列BlockingQueue,java.util.concurrent下的BlockingQueue接口表示一个线程放入和提取实例的队列。 适用场景: BlockingQueue通常用于一个线程生产对象,而另一个线程消费对象的场景。 一个线程往里面放,另一个线程从里面取的…

博主自制丨免费下载丨免费使用丨仅用于测试

链接:点我立即下载 提取码:0j6h

CSS 小结笔记之em

1、为什么使用em em也是css中的一种单位&#xff0c;和px类似。很多人会疑惑为什么有了px之后还要使用em&#xff0c;而且em使用起来相对于px来讲比较麻烦。 em主要是应用于弹性布局&#xff0c;下面给出一个小栗子说明em的强大之处 <!DOCTYPE html> <html lang&quo…

java 向父类_Java基础——面向对象(Object父类)

原标题&#xff1a;Java基础——面向对象(Object父类)声明&#xff1a;本栏目所使用的素材都是凯哥学堂VIP学员所写&#xff0c;学员有权匿名&#xff0c;对文章有最终解释权&#xff1b;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。Object 父类&#xff1a;Object的方法…