父子盒子优先级 onclick

2024-09-07

js 父子标签同时设置onclick，子标签触发父标签onclick解决办法

js 父子标签同时设置onclick,子标签触发父标签onclick 或子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = window.event || arguments.callee.caller.arguments[0]; if (window.event) ev.cancelBubble = true; else { ev.stopPropagation(); }

盒子模型，定位技术，负边距，html5 新增标签

盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右默认=左 3.写三个值:上.右.下三个方向,左默认=右 4.写四个值:上.右.下.左 5.写三个值+auto :控件居右显示 margin: 50px 30px 20px auto;距离浏览器:30px; 6.margin:0 auto;设置控件在父容器中水平居中 */ /*[border 边框] * border 有三个属性值:宽度w

前端-----margin用法(盒子模型里补充)

margin塌陷问题当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> css样式: *{ padding:

CSS 基础例子盒子模型及外边距塌陷

我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: 父子元素包含情况下的计算,父亲元素会把儿子元素的整个盒子(包括margin)的大小作为内容. 外边距塌陷(margin collapse),块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为外边距塌陷. 一般我们给元素设置背景色不会包

前端之CSS——盒子模型和浮动

一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示: 需要注意:浏览器的调试窗口通常会有相似的模型可供开发调试使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

CSS 盒子的边距塌陷

tip:为能更直观地学习,本文章已省略部分 css 样式代码. 我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父盒子 header-div 的上边沿有一定间距. 现页面效果: 目标页面效果: 为了达成上图的效果,我们首先就能想到给子盒子设置一个上外边距: <style> .image-div { /*子盒子*/ margin-top:25px; } </style> 让我们来看看结果如何呢? 结

前段基础之CSS

本文参考:https://www.cnblogs.com/ctztake/p/7577436.html CSS 语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... property: value } ''' 例如: h1 { color:red; font-size:14px; } css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位一丶css选择器的优先级行内 > id选择器 > 类选择器 > 标签选择器 > 继承 1000 100 10 1 0 # 所有的值可以累加,但不能进位 (同级别的数值可以累加) # 优先级如果相同,写在后面的生效二丶css的颜色表示 /*RGB表示法*/ rgb: red green blue /* 光谱三原色 */ rgb(255,255,255)

第十一章前端开发-css

第十一章前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容与表现分离网页的表现统一,容易修改丰富的样式,使页面布局更加灵活减少代码量,增加网页浏览器速度,节省网路带宽运用独立页面的css,有利于网页被搜索引擎收录如何用? 我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link标签引用该C

02-初识CSS

一. CSS介绍 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. HTML的缺陷: 不能够适应多种设备要求浏览器必须智能化足够庞大数据和显示没有分开功能不够强大 CSS的优点: 使数据和显示分开降低网络流量使整个网站视觉效果一致使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css

前端05 /js基础

前端05 /js基础昨日内容回顾 css选择器的优先级行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,255) #000000-#FFFFFF 单词表示 rgba(255,255,255,0.5)(透明度) 字体 font-family 设置"微软雅黑","宋体" font-size 设置字体大小默认的字体大小16px font-weight bold粗体文本 tex

asp.net实现数据库版动态网页滑动门

前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.cs" Inherits="UI.滑动门" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&quo

css盒模型研究

css的盒模型一直是一个重点和难点,最近由后端的学习转到前端,觉得有必要深入研究一下css的盒模型. 1.万物皆盒子我们必须要有一个理念,在html的世界里,万物皆盒子,那就是任何一个html元素都是一个盒模型.比如一个div,一个标题,一个段落.他们本质上都是一个盒模型. 2.盒模型的结构如下所示. 注意它的宽度和高度指的是它元素的宽度和高度.元素到边框之间的区域叫做padding(内边距),边框在往外扩展的区域就叫做外边界.外边界就是整个盒模型能到达的最遥远的地方,也是保证其他的盒子不会

margin-塌陷问题

塌陷问题当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列(少见) 首先设置两个DIV,并为其制定宽高 /*HTML部分*/ <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> /*CSS部分*/ <style> *{ margin: 0; padding:

css中常见margin塌陷问题之解决办法

塌陷问题当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <div class="box1">box1</div> 4 <div class="box2">box2</div> 5 </body> 6 /*CSS部分*/ 7 <style> 8 *{ 9 margi

python全栈开发 * 继承性层叠性盒模型标准文档流 * 180809

---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(decoration:underline).line-*(height) 行高等可以继承(主要是文本级的标签元素) (a比较特殊) 3.不可继承 :但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承. 二.层叠性层叠性 : 权重大的标签覆盖掉了权重小的标签 (数 id

学习记录----简单的原生js路由

在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发生变化,这就是前端路由做的事.也就是通过JS实时检测url的变化,从而改变显示的内容. 目前很多前端框架都有接口去实现路由,比如vuejs的vue-route等.我们可以利用原生的hashchange事件来模拟一个简单的路由. 路由:根据不同的url 显示不同的内容方法:hash(锚链接)实现路由

web前端（11）—— 页面布局1

要说页面布局的话,那就必须说说margin,padding,和background.这三个属性其实都是前面讲过的,这里还是再次讲解以下,为什么呢?因为是这样的,光靠前面的css样式来设置,你很可能会遇到很多的问题,而且还不知道怎么解决,所以,这里再拿出来讲解下 margin margin干嘛的不再多说了,margin属性有个很有名很经典的现象: 塌陷现象塌陷现象里又有两种: 垂直方向层级嵌套垂直方向: 例: <!DOCTYPE html> <html lang="en&q

5-24 css内容的补充

1,标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画标准文档流下有哪些微观现象? 1.1空白折叠现象多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. <!DOCTYPE html> <html lang="

day 41 标准文档流浮动

一.标准文档流什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画标准文档流下有哪些微观现象? 1.空白折叠现象多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 2.高矮不齐,底边对齐文字还有图片大小不一,都会让我们

CSS布局设置

一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离如果让你做一个宽高402*402的盒子,您如何来设计

父子盒子优先级 onclick

热门专题